CSS之 sass、less、stylus 預處理器的使用方式與區別

更詳細區別參考文檔：https://blog.csdn.net/pedrojuliet/article/details/72887490

使用變量：

　　sass：  使用 $ 符號定義變量，如： $base_color: #efefef

　　 less： 使用 @ 符號定義變量，如：@base_font_size: 16px

　　stylus: 對變量沒有任何設定（變量不能以@符號開頭），變量之間能夠使用 「=」， 「空格」或者 「：」，如:  base_font_color: red,   borderwidth=1px,  borderColor #cacaca

 

導入操做（@import）：

　　如：

base  css文件
/* file.{type} */
body {
  background: #000;
}


xxx css文件
@ import "1.css";
@ import "file.{type}";
p {
  background: #092873;
}


結果
@ import "1.css";
body {
  background: #000;
}
p {
  background: #092873;
}

 

繼承：當咱們須要爲多個元素定義相同的樣式的時候，咱們能夠考慮使用繼承的作法

　　sass繼承：經過 @extend來實現代碼組合聲明（stylus也能夠使用此方法實現繼承）

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;  
}

.err {
  @extend .message;
  border-color: red;
}

　　less繼承

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  .message;
  border-color: green;
}
.error {
  .message;
  border-color: red;
}

 

混入（Mixins）：有點像函數或者宏，當某段css常常要在多個元素中使用時，能夠爲這些共用的css定義一個Mixin，而後在須要的地方引入該Mixin便可

　　sass語法:

/* 定義一個混入語法，接受一個變量，默認值爲2px，可選 */
@mixin err($borderWidth:2px){
    border:$borderWidth solid #cacaca
    color: #cacaca
}

.generic-error {
    padding: 20px;
    margin: 4px;
    @include error(5px);  /* 調用混入語法，傳入一個參數獲得 border:5px solid #cacaca*/
}

　　stylus語法

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;/* 調用混入語法，傳入一個參數獲得 border:5px solid #cacaca*/、
  error(); 
}

 

　　

怎能讓着不停燃燒的心，就這樣耗盡消失在平庸裏