親身經(jīng)歷
sass基本語法想必大家都能掌握，但本身我們的項(xiàng)目復(fù)雜度不夠高，小型公司又沒有自己的前端規(guī)范，基本上想怎么寫就怎么寫。導(dǎo)致我們長時(shí)間做一些低級(jí)的 dirty work。那些高級(jí)語法更是從未用到。
本文主旨在于例舉一些較為常用語法，以及本人在項(xiàng)目中的使用，意在與各位初級(jí)工程師互相交流學(xué)習(xí)，大佬就請(qǐng)繞道吧。
BEM規(guī)范
太長不看版本：BEM就是 element-ui 所使用的css 命名規(guī)范。本文例子也是仿照element實(shí)現(xiàn)的相關(guān)功能。
在這里貼出一篇BEM的基本介紹文章 編寫模塊化CSS：BEM
在這里貼出一篇文章，關(guān)于BEM規(guī)范的常見問題已經(jīng)給出了很棒的解決方案。
關(guān)于BEM規(guī)范的十個(gè)常見問題
代碼示例
本文中所使用框架為 vue2 + sass
43C8CEA0-B7FC-4d20-AC60-6DCF5973ECB4.png
需求如圖所示，生成一個(gè)頭部導(dǎo)航。（抱歉只截個(gè)header，公司項(xiàng)目，需要小小保密）
html結(jié)構(gòu)
<template>
<header class="t-header">
<!-- t 的含義是top，代表頁面頂部header 其實(shí)就是el-header 我們寫的是自己的組件，所以不需要el作為標(biāo)識(shí)。-->
<!-- 頁面內(nèi)其他容器可能也包含header，為了不與其他容器混淆，增加自己獨(dú)有標(biāo)識(shí)t -->
<div class="t-header__container">
<div v-for="(item) in sublist" :key="item.name" class="t-header__item">
{{ item.name }}
</div>
</div>
</header>
</template>
export default {
name: 'Index',
data() {
return {
sublist: [
{ name: '首頁', path: 'home' },
{ name: '賽事引言', path: 'describe' },
{ name: '賽程安排', path: 'plan' },
{ name: '獎(jiǎng)項(xiàng)設(shè)置', path: 'reward' },
{ name: '組織單位', path: 'unit' },
{ name: '聯(lián)系方式', path: 'rank' },
],
}
},
sass語法 （正文開始）
設(shè)計(jì)思路：
- 利用sass變量，提前定義命名空間和mixin文件。利用sass特性，使用傳參的方式生成我們想要的class類名。
- 在組件內(nèi)部使用mixin 語法。
- 其實(shí)顏色和背景圖等變量可以在聲明文件中定義。但是由于項(xiàng)目著實(shí)太小，且共用部分不多，于是便定義在組件內(nèi)部。
// BEM 代碼塊 元素 修飾符
// el-button__header 按鈕模塊的 頭部代碼
// el-button--info 按鈕模塊的info狀態(tài)樣式
// is-distable 禁用狀態(tài)的代碼
$namespace:'el';//修飾命名空間 本例中沒有使用到
$state-prefix:'is-';// 修飾狀態(tài)
$modifier-separator:'--';// 修飾類型
$element-separator:'__';// 劃分空間分隔符
@import "./var";// 引入定義的變量
@mixin b($namespace,$block) {
// 重新定義一個(gè)變量B, 值是b函數(shù)傳入的前綴和名字
// global 聲明全局變量
$B: $namespace+'-'+$block !global;
// # 取表達(dá)式里面的值，放在#號(hào)的位置。編譯完成就是.el-btn
.#{$B}{
//放入原有樣式
@content
}
}
// 使用方法示例：真正使用時(shí)，并不會(huì)在這個(gè)文件中使用，這個(gè)文件專門生成mixin。
// include 就是調(diào)用mixin的意思。假如mixin相當(dāng)于js的函數(shù)，include就是調(diào)用函數(shù)。
@include b(t, header) {
background: #fff
}
// 會(huì)編譯為
.t-header{
background: #fff
}
-------------------------------分割線---------------------------------
// .z-button.is-dissabled
@mixin when($state) {
// @at-root聲明在根下，跳出所有父級(jí)選擇器
@at-root {
// &將父選擇器取出來，放到&符號(hào)的位置
&.#{$state-prefix + $state}{
@content;
}
}
}
// 使用方法示例：真正使用時(shí)，并不會(huì)在這個(gè)文件中使用，這個(gè)文件專門生成mixin。
@include b(t, header) {
@include when(active) {
color:#fff
}
}
// 會(huì)編譯為
.t-header.is-active{
color: #fff
}
-------------------------------分割線---------------------------------
// &--primary ==> .el-button--primary
@mixin m($modifier) {
@at-root {
#{ & + $modifier-separator + $modifier }{
@content;
}
}
}
// 使用方法示例：真正使用時(shí)，并不會(huì)在這個(gè)文件中使用，這個(gè)文件專門生成mixin。
@include b(t, header) {
@include m(primary) {
color:#fff
}
}
// 會(huì)編譯為
.t-header--primary{
color: #fff
}
-------------------------------分割線---------------------------------
@mixin e($element){
@at-root{
&{
#{"." + $B + $element-separator + $element}{
@content
}
}
}
}
// 使用方法示例：真正使用時(shí)，并不會(huì)在這個(gè)文件中使用，這個(gè)文件專門生成mixin。
@include b(t, header) {
@include e(primary) {
color:#fff
}
}
// 會(huì)編譯為
.t-header{
.t-header__item{
color: #fff
}
}
// 將各種顏色定義在css開頭，當(dāng)下次定制化項(xiàng)目來臨時(shí)，直接更改顏色和圖片即可。
// 不需要在css中逐一尋找
$front-color-default: #fff;
$front-color-active: #000;
$front-color-hover: #000;
$header-bg: rgba(0, 122, 224, .7);
$header-bg-active: #fff;
$header-bg-hover: #fff;
// t-header
@include b(t, header) {
background: $header-bg;
font-size: 16px;
font-weight: 700;
height: 60px;
line-height: 60px;
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 999;
cursor: pointer;
// t-header__container
@include e(container) {
float: right;
}
// t-header__item
@include e(item) {
color: $front-color-default;
width: 150px;
text-align: center;
float: left;
&:hover{
transition: .3s;
background: $header-bg-hover;
color: $front-color-hover;
}
// 激活狀態(tài)的樣式 is-active
@include when(active) {
color: $header-bg-active;
}
}
}
