前言

Sass是CSS3語言的擴(kuò)展，它能幫你更省事地寫出更好的樣式表，使你擺脫重復(fù)勞動(dòng)，使工作更有創(chuàng)造性。因?yàn)槟隳芨斓負(fù)肀ё兓阋矊⒏矣谠谠O(shè)計(jì)上創(chuàng)新。你寫出的樣式表能夠自如地應(yīng)對(duì)修改顏色或修改HTML標(biāo)簽，并編譯出標(biāo)準(zhǔn)的CSS代碼用于各種生產(chǎn)環(huán)境。Sass語法比較簡(jiǎn)單，難點(diǎn)在于如何將Sass運(yùn)用到實(shí)際項(xiàng)目中，解決CSS存在的痛點(diǎn)，從而提高我們效率。經(jīng)過實(shí)際項(xiàng)目的摸索，總結(jié)了以下14條實(shí)踐經(jīng)驗(yàn)進(jìn)行分享，希望能幫助大家擴(kuò)寬思維，更好地將Sass運(yùn)用到實(shí)際項(xiàng)目中。在項(xiàng)目中，我們使用支持傳統(tǒng)的類CSS語法—— Scss，所以以下項(xiàng)目經(jīng)驗(yàn)總結(jié)分享以Scss為例。

1、變量 $ 使用

我們可以通過變量來復(fù)用屬性值，比如顏色、邊框大小、圖片路徑等，這樣可以做到更改一處，從而進(jìn)行全局更改，從而實(shí)現(xiàn)“換膚”的功能。

實(shí)例1：我們的組件庫，利用變量配置，進(jìn)行統(tǒng)一更改組件的顏色、字體大小等（換膚）： 

$color-primary: #3ecacb;  
$color-success: #4fc48d;  
$color-warning: #f3d93f;  
$color-danger: #f6588e;  
$color-info: #27c6fa; 

實(shí)例2：圖片的配置及全局引入

Scss中圖片的使用，可能存在以下2個(gè)問題：

（1）如果樣式文件和使用該樣式文件的vue文件不在同一目錄會(huì)出現(xiàn)圖片找不到

（2）如果將圖片路徑配置變量寫在vue文件的style中，但是該寫法導(dǎo)致圖片和樣式分離

我們可以采用將圖片路徑寫成配置文件，然后進(jìn)行全局引入，這樣可以統(tǒng)一更改圖片路徑（并且該方法只會(huì)在使用相應(yīng)圖片時(shí)進(jìn)行加載，不會(huì)導(dǎo)致額外性能問題）： 

$common-path: './primary/assets/img/';  
$icon-see: $common-path+'icon-see.png';  
$icon-play: $common-path+'icon-play.png';  
$icon-comment: $common-path+'icon-comment.png';  
$icon-checkbox: $common-path+'icon-checkbox.png'; 

2、@import 導(dǎo)入Scss文件

（1）Css中的@import規(guī)則，它允許在一個(gè)css文件中導(dǎo)入其他css文件。然而，后果是只有執(zhí)行到@import時(shí)，瀏覽器才會(huì)去下載其他css文件，這導(dǎo)致頁面加載起來特別慢。

（2）Scss中的@import規(guī)則，不同的是，scss的@import規(guī)則在生成css文件時(shí)就把相關(guān)文件導(dǎo)入進(jìn)來。這意味著所有相關(guān)的樣式被歸納到了同一個(gè)css文件中，而無需發(fā)起額外的下載請(qǐng)求。

實(shí)例1：組件庫中統(tǒng)一將組件的樣式文件import進(jìn)index.sccs中，然后如果項(xiàng)目中有使用組件庫的地方只需要在項(xiàng)目的入口處，引入index.scss文件，如下所示在index.scss文件中引入各組件的樣式文件： 

@import "./base.scss";  
@import "./webupload.scss";  
@import "./message-hint.scss"; 

3、局部文件命名的使用

scss局部文件的文件名以下劃線開頭。這樣，scss就不會(huì)在編譯時(shí)單獨(dú)編譯這個(gè)文件輸出css，而只把這個(gè)文件用作導(dǎo)入。在使用scss時(shí)，混合器mixins是最適合的使用場(chǎng)景，因?yàn)榛旌掀鞑恍枰獑为?dú)編譯輸出css文件。

實(shí)例1：將混合器的名稱寫成局部文件命名的方式，如下圖所示

img

4、Scss的嵌套功能和父選擇器標(biāo)識(shí)符

我們可以使用嵌套功能和父選擇器標(biāo)識(shí)符 & 來縮減重復(fù)的代碼，特別如果你CSS類采用BEM命名規(guī)范，樣式類命名存在冗長(zhǎng)的問題。使用此功能，能解決BEM命名冗長(zhǎng)的問題，且樣式可讀性更高。

實(shí)例1：嵌套功能和父選擇器標(biāo)識(shí)符 & 解決BEM冗長(zhǎng)問題： 

.tea-assignhw {   
 &__top {    
  margin: 0;    
}   
 &__content {   
   padding-left: 45px;   
 }    
&__gradeselect {  
   width: 158px;    
 } 
} 

**實(shí)例2：**嵌套中使用子選擇器、兄弟選擇器和偽類選擇器

（1）子選擇器 

&__hint {  
  margin: 20px;   
   font-size: 14px;   
  > p:first-child {   
     font-weight: bold;    
 }  
} 

（2）兄弟選擇器 

&__input {   
 width: 220px;   
 & + span {     
   margin-left: 10px;    
 }  
} 

（3）偽類選擇器 

&__browse {  
  background: url($btn-search) no-repeat;   
&:hover {     
  background: url($btn-search) -80px 0 no-repeat;   
}    
&:visited {   
  background: url($btn-search) -160px 0 no-repeat;   
 }  
} 

5、@mixin 混合器和 @extend 指令的使用

變量使你能夠復(fù)用屬性值，但如果想要復(fù)用一大段規(guī)則呢？傳統(tǒng)的做法是，如果在樣式表

中發(fā)現(xiàn)重復(fù)，就會(huì)把公共的規(guī)則抽離出來放到新的CSS類中。

在Scss中可以使用混合器@mixin和@extend繼承指令來解決以上提到的復(fù)用一大段規(guī)則的場(chǎng)景。但兩者的使用場(chǎng)景又有啥區(qū)別呢？

（1）@mixin主要的優(yōu)勢(shì)就是它能夠接受參數(shù)。如果想傳遞參數(shù)，你會(huì)很自然地選擇@mixin而不是@extend，因?yàn)锧extend不能夠接受參數(shù)

（2）因?yàn)榛旌掀饕?guī)則都混入到其他類中，所以在輸出的樣式表中不能完全避免重復(fù)。選擇器繼承的意思就是讓一個(gè)選擇器能夠復(fù)用另一個(gè)選擇器的所有樣式，但又不重復(fù)輸出這些樣式屬性；即使用@extend產(chǎn)生 DRY CSS風(fēng)格的代碼（Don't repeat yourself）

綜上所述，如果你需要傳參數(shù)，只能使用@mixin混合器，否則用@extend繼承來實(shí)現(xiàn)更優(yōu)。

實(shí)例1：@mixin混合器的使用 

@mixin paneactive($image, $level, $vertical) {   
  background: url($image) no-repeat $level $vertical;    
  height: 100px;    
  width: 30px;   
  position: relative;    
  top: 50%;  
}  
&--left-active {    
  @include paneactive($btn-flip, 0, 0);  
}  
&--right-active {   
  @include paneactive($btn-flip, 0, -105px);  
} 

實(shí)例2：@extend繼承的使用 

.common-mod {    
  height: 250px;   
  width: 50%;    
  background-color: #fff; 
  text-align: center;  
}  
&-mod {   
  @extend .common-mod;    
  float: right; 
 }  
&-mod2 {   
  @extend .common-mod;  
} 

6、@mixin 混合器默認(rèn)參數(shù)值的使用

在@include混合器時(shí)不必傳入所有的參數(shù)，我們可以給參數(shù)指定一個(gè)默認(rèn)值，如果所需要傳的參數(shù)是 默認(rèn)值，則@include時(shí)可以省略該參數(shù)；如果所需要傳的參數(shù)不是默認(rèn)值，則@include時(shí)則傳入新的參數(shù)。

實(shí)例1：@mixin混合器默認(rèn)參數(shù)值的使用 

@mixin pane($dir: left) {    
  width: 35px;   
  display: block;    
  float: $dir;    
  background-color: #f1f1f1;  
}  
&__paneleft {   
  @include pane;  
}  
&__paneright {  
  @include pane(right);  
} 

7、#{} 插值的使用

通過 #{} 插值語句可以在選擇器或?qū)傩悦惺褂米兞俊．?dāng)有兩個(gè)頁面的樣式類似時(shí)，我們會(huì)將類似的樣式抽取成頁面混合器，但兩個(gè)不同的頁面樣式的命名名稱根據(jù)BEM命名規(guī)范不能一樣，這時(shí)我們可使用插值進(jìn)行動(dòng)態(tài)命名。

實(shí)例1：頁面級(jí)混合器中的類名利用#{}插值進(jìn)行動(dòng)態(tài)設(shè)置 

@mixin home-content($class) {   
 .#{$class} {     
   position: relative;  
    background-color: #fff;   
    overflow-x: hidden;    
    overflow-y: hidden;    
  &--left {      
    margin-left: 160px;  
  }     
  &--noleft {   
     margin-left: 0;    
 }   
 }  
} 

8、運(yùn)算的使用

SassScript 支持?jǐn)?shù)字的加減乘除、取整等運(yùn)算 (+, -, *, /, %)

實(shí)例1：input組件根據(jù)輸入框的高度設(shè)置左右內(nèi)邊距，如下所示：.

ps-input {   
   display: block;    
   &__inner {     
    -webkit-appearance: none;    
     padding-left: #{$--input-height + 10  
   };      
     padding-right: #{$--input-height + 10  
   };     
  }  
} 

9、相關(guān)scss自帶函數(shù)的應(yīng)用

scss自帶一些函數(shù)，例如hsl、mix函數(shù)等。

**實(shí)例1：button組件的點(diǎn)擊后顏色是將幾種顏色根據(jù)一定的比例混合在一起，生成另一種顏色。**如下所示： 

&:focus {   
  color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);    
  border-color: transparent;    
  background-color: transparent;}  
&:active {    
  color: mix($--color-black, $--color-primary, $--button-active-shade-percent);   
  border-color: transparent;  background-color: transparent;  
} 

10、相關(guān)scss自帶函數(shù)的應(yīng)用

@for指令可以在限制的范圍內(nèi)重復(fù)輸出樣式，每次按變量的值對(duì)輸出結(jié)果進(jìn)行變動(dòng)。

實(shí)例1：例如項(xiàng)目中需要設(shè)置hwicon類底下第2到8個(gè)div子節(jié)點(diǎn)需設(shè)置樣式，如下所示： 

@for $i from 2 through 8 {    
.com-hwicon {      
 > div:nth-child(#{$i}) {  
    position: relative;  
    float: right;    
   }    
 }  
} 

11、each遍歷、map數(shù)據(jù)類型、@mixin/@include混合器、#{}插值 結(jié)合使用

可通過結(jié)合each遍歷、map數(shù)據(jù)類型、@mixin/@include混合器、#{}插值，從而生成不同的選擇器類，并且每個(gè)選擇器類中的背景圖片不同，如下所示： 

$img-list: (    
 (accessimg, $papers-access),   
  (folderimg, $papers-folder),  
  (bmpimg, $papers-bmp),    
  (xlsimg, $papers-excel),    
  (xlsximg, $papers-excel),    
  (gifimg, $papers-gif),   
  (jpgimg, $papers-jpg),    
  (unknownimg, $papers-unknown) 
 ); 
 @each $label, $value in $img-list { 
  .com-hwicon__#{$label} {  
    @include commonImg($value);   
 }  
} 

12、樣式代碼檢查校驗(yàn) —— stylelint 插件

CSS不能算是嚴(yán)格意義的編程語言，但是在前端體系中卻不能小覷。CSS 是以描述為主的樣式表，如果描述得混亂、沒有規(guī)則，對(duì)于其他開發(fā)者一定是一個(gè)定時(shí)炸彈，特別是有強(qiáng)迫癥的人群。CSS 看似簡(jiǎn)單，想要寫出漂亮的 CSS 還是相當(dāng)困難。所以校驗(yàn) CSS 規(guī)則的行動(dòng)迫在眉睫。stylelint是一個(gè)強(qiáng)大的現(xiàn)代 CSS 檢測(cè)器，可以讓開發(fā)者在樣式表中遵循一致的約定和避免錯(cuò)誤。

**（1）需要安裝gulp、stylelint、gulp-postscss 、 postcss-reporter、stylelint-config-standard，**安裝命令為： 

npm install gulp stylelint gulp-postscss  postcss-reporter   
stylelint-config-standard--save-dev 

（2）安裝完成后會(huì)在項(xiàng)目根目錄下創(chuàng)建gulpfile.js文件，文件gulpfile.js配置為： 

var reporter = require('postcss-reporter');  
var stylelint = require('stylelint');  
var stylelintConfig = {    
  'extends': 'stylelint-config-standard',   
  'rules': {      
  'at-rule-no-unknown': [  
     true, {        
     'ignoreAtRules': [    
     'extend',       
      'include',  
      'mixin',       
      'for'       
      ]     
     }  
   ]  
  }  
};  
gulp.task('scss-lint', function() {
    var processors = [     
    stylelint(stylelintConfig),     
    reporter({       
      clearMessages: true,      
      throwError: true      
   })    
   ];    
 return gulp.src(    
   ['src/style/*.scss']// 需要工具檢查的scss文件   
  ).pipe(postcss(processors));});  
 gulp.task('default', ['scss-lint']); 

(3) stylelint-config-standard 檢驗(yàn)規(guī)則

stylelint-config-standard為stylelint官方推薦的標(biāo)準(zhǔn)校驗(yàn)規(guī)則，具體校驗(yàn)規(guī)則有哪些內(nèi)容，可參照官網(wǎng)。

(4)運(yùn)行命令進(jìn)行樣式檢查

13、樣式自動(dòng)修復(fù)插件 —— stylefmt 插件

stylefmt 是一個(gè)基于 stylelint 的代碼修正工具，它可以基于stylelint的代碼規(guī)范約定配置，對(duì)可修正的地方作格式化輸出。

（1）gulp.js配置文件如下： 

var stylefmt = require('gulp-stylefmt'); // css格式自動(dòng)調(diào)整工具  
gulp.task('stylefmt', function() {  
  return gulp.src(     
  ['src/style/student/index.scss' // 需要工具檢查的scss文件     
  ]).pipe(stylefmt(stylelintConfig))  
    .pipe(gulp.dest('src/style/dest/student'));});  
 gulp.task('fix', ['stylefmt']); 

（2）運(yùn)行命令進(jìn)行樣式修復(fù)，如下圖所示

img

14、將scss語法編譯成css語法——gulp-sass 插件

初寫scss代碼時(shí)，由于對(duì)語法不熟悉等，寫出來的scss代碼所得到的頁面效果，并不是我們想要的。這時(shí)，我們可以使用gulp-sass插件來監(jiān)聽scss代碼，實(shí)時(shí)生成css代碼，從而可以通過查看css代碼，來判斷所寫的scss代碼是否正確。

（1）gulp.js配置文件如下： 

var gulpsass = require('gulp-sass');  
gulp.task('gulpsass', function() {   
  return gulp.src('src/style/components/hwIcon.scss')   
  .pipe(gulpsass().on('error', gulpsass.logError))     
  .pipe(gulp.dest('src/style/dest'));});  
  gulp.task('watch', function() {    
  gulp.watch('src/style/components/hwIcon.scss', ['gulpsass']);  
});復(fù)制代碼復(fù)制代碼 

（2）運(yùn)行命令從而監(jiān)聽scss文件，動(dòng)態(tài)編譯scss代碼生成css代碼文件，如下圖所示

img