SCSS — 縮減50%的樣式代碼

時間 2019-11-06

標籤 scss 縮減 50% 樣式代碼简体版

原文原文鏈接

Sass是CSS3語言的擴展，它能幫你更省事地寫出更好的樣式表，使你擺脫重複勞動，使工做更有創造性。由於你能更快地擁抱變化，你也將勇於在設計上創新。你寫出的樣式表可以自如地應對修改顏色或修改HTML標籤，並編譯出標準的CSS代碼用於各類生產環境。Sass語法比較簡單，難點在於如何將Sass運用到實際項目中，解決CSS存在的痛點，從而提升咱們效率。通過實際項目的摸索，總結了如下14條實踐經驗進行分享，但願能幫助你們擴寬思惟，更好地將Sass運用到實際項目中。在項目中，咱們使用支持傳統的類CSS語法—— Scss，因此如下項目經驗總結分享以Scss爲例。

一、變量 $ 使用

咱們能夠經過變量來複用屬性值，好比顏色、邊框大小、圖片路徑等，這樣能夠作到更改一處，從而進行全局更改，從而實現「換膚」的功能。

實例1：咱們的組件庫，利用變量配置，進行統一更改組件的顏色、字體大小等（換膚）：

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

實例2：圖片的配置及全局引入

Scss中圖片的使用，可能存在如下2個問題：

（1）若是樣式文件和使用該樣式文件的vue文件不在同一目錄會出現圖片找不到

（2）若是將圖片路徑配置變量寫在vue文件的style中，可是該寫法致使圖片和樣式分離

咱們能夠採用將圖片路徑寫成配置文件，而後進行全局引入，這樣能夠統一更改圖片路徑（而且該方法只會在使用相應圖片時進行加載，不會致使額外性能問題）：

$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';複製代碼複製代碼

二、@import 導入Scss文件

（1）Css中的@import規則，它容許在一個css文件中導入其餘css文件。然而，後果是隻有執行到@import時，瀏覽器纔會去下載其餘css文件，這致使頁面加載起來特別慢。

（2）Scss中的@import規則，不一樣的是，scss的@import規則在生成css文件時就把相關文件導入進來。這意味着全部相關的樣式被概括到了同一個css文件中，而無需發起額外的下載請求。

實例1：組件庫中統一將組件的樣式文件import進index.sccs中，而後若是項目中有使用組件庫的地方只須要在項目的入口處，引入index.scss文件，以下所示在index.scss文件中引入各組件的樣式文件：

@import "./base.scss";
@import "./webupload.scss";
@import "./message-hint.scss";複製代碼複製代碼

三、局部文件命名的使用

scss局部文件的文件名如下劃線開頭。這樣，scss就不會在編譯時單獨編譯這個文件輸出css，而只把這個文件用做導入。在使用scss時，混合器mixins是最適合的使用場景，由於混合器不須要單獨編譯輸出css文件。

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

四、Scss的嵌套功能和父選擇器標識符

咱們可使用嵌套功能和父選擇器標識符 & 來縮減重複的代碼，特別若是你CSS類採用BEM命名規範，樣式類命名存在冗長的問題。使用此功能，能解決BEM命名冗長的問題，且樣式可讀性更高。

實例1：嵌套功能和父選擇器標識符 & 解決BEM冗長問題：

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

實例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; 
 }
}複製代碼複製代碼

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

變量使你可以複用屬性值，但若是想要複用一大段規則呢？傳統的作法是，若是在樣式表

中發現重複，就會把公共的規則抽離出來放到新的CSS類中。

在Scss中可使用混合器@mixin和@extend繼承指令來解決以上提到的複用一大段規則的場景。但二者的使用場景又有啥區別呢？

（1）@mixin主要的優點就是它可以接受參數。若是想傳遞參數，你會很天然地選擇@mixin而不是@extend，由於@extend不可以接受參數

（2）由於混合器規則都混入到其餘類中，因此在輸出的樣式表中不能徹底避免重複。選擇器繼承的意思就是讓一個選擇器可以複用另外一個選擇器的全部樣式，但又不重複輸出這些樣式屬性；即便用@extend產生 DRY CSS風格的代碼（Don't repeat yourself）

綜上所述，若是你須要傳參數，只能使用@mixin混合器，不然用@extend繼承來實現更優。

實例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);
}複製代碼複製代碼

實例2：@extend繼承的使用

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

六、@mixin 混合器默認參數值的使用

在@include混合器時沒必要傳入全部的參數，咱們能夠給參數指定一個默認值，若是所須要傳的參數是默認值，則@include時能夠省略該參數；若是所須要傳的參數不是默認值，則@include時則傳入新的參數。

實例1：@mixin混合器默認參數值的使用

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

七、#{} 插值的使用

經過 #{} 插值語句能夠在選擇器或屬性名中使用變量。當有兩個頁面的樣式相似時，咱們會將相似的樣式抽取成頁面混合器，但兩個不一樣的頁面樣式的命名名稱根據BEM命名規範不能同樣，這時咱們可以使用插值進行動態命名。

實例1：頁面級混合器中的類名利用#{}插值進行動態設置

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

八、運算的使用

SassScript 支持數字的加減乘除、取整等運算 (+, -, *, /, %)

實例1：input組件根據輸入框的高度設置左右內邊距，以下所示：

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

九、相關scss自帶函數的應用

scss自帶一些函數，例如hsl、mix函數等。

實例1：button組件的點擊後顏色是將幾種顏色根據必定的比例混合在一塊兒，生成另外一種顏色。以下所示：

&: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;
}複製代碼複製代碼

十、相關scss自帶函數的應用

@for指令能夠在限制的範圍內重複輸出樣式，每次按變量的值對輸出結果進行變更。

實例1：例如項目中須要設置hwicon類底下第2到8個div子節點需設置樣式，以下所示：

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

十一、each遍歷、map數據類型、@mixin/@include混合器、#{}插值結合使用

可經過結合each遍歷、map數據類型、@mixin/@include混合器、#{}插值，從而生成不一樣的選擇器類，而且每一個選擇器類中的背景圖片不一樣，以下所示：

$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); 
 }
}複製代碼複製代碼

十二、樣式代碼檢查校驗 —— stylelint 插件

CSS不能算是嚴格意義的編程語言，可是在前端體系中卻不能小覷。 CSS 是以描述爲主的樣式表，若是描述得混亂、沒有規則，對於其餘開發者必定是一個定時炸彈，特別是有強迫症的人羣。CSS 看似簡單，想要寫出漂亮的 CSS 仍是至關困難。因此校驗 CSS 規則的行動迫在眉睫。stylelint是一個強大的現代 CSS 檢測器，可讓開發者在樣式表中遵循一致的約定和避免錯誤。

（1）須要安裝gulp、stylelint、gulp-postscss 、 postcss-reporter、stylelint-config-standard，安裝命令爲：

npm install gulp stylelint gulp-postscss  postcss-reporter 
stylelint-config-standard--save-dev複製代碼複製代碼

（2）安裝完成後會在項目根目錄下建立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 檢驗規則

stylelint-config-standard爲stylelint官方推薦的標準校驗規則，具體校驗規則有哪些內容，可參照官網。

(4)運行命令進行樣式檢查，以下圖所示css

1三、樣式自動修復插件 —— stylefmt 插件

stylefmt 是一個基於 stylelint 的代碼修正工具，它能夠基於stylelint的代碼規範約定配置，對可修正的地方做格式化輸出。

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

var stylefmt = require('gulp-stylefmt'); // css格式自動調整工具
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）運行命令進行樣式修復，以下圖所示

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

初寫scss代碼時，因爲對語法不熟悉等，寫出來的scss代碼所獲得的頁面效果，並非咱們想要的。這時，咱們可使用gulp-sass插件來監聽scss代碼，實時生成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']);
});複製代碼複製代碼