切圖利器！scss用法推薦

經歷了一個博達站羣前端頁面改造的項目，用了scss，我才真正的意識到預編譯的css用起來有多爽

變量

$imgBaseUrl: '../';
$theme-color: #5576BD; // 主題顏色
$font-color: #272727; // 主要字體顏色
$font-sub-color: #c1c1c1; // 次要字體顏色
$full-width: 750px;
....
// 諸如此類，多處使用的樣式，直接寫成變量。使用時

.box{
    width: $full-width;
    font-size: 24px;
    color: $font-color;
    border: 1px solid $theme-color;
}

scss中註釋就像寫js同樣的寫法，編譯完成以後，註釋就不存在了。灰常的方便

嵌套css

簡單點說，scss中同一層級的css選擇器，只寫一遍便可：

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

 /* 編譯後 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

基礎的不說太多了，接下來重點來了

敲一敲

mixin

mixin（混合器），能夠將一段css打包成一個代碼塊，進行調用。好比：

// 清浮動
@mixin clearFloat{zoom:1; &:after{display:block; clear:both; content: ''; visibility:hidden; height:0}}
// 單行文本溢出
@mixin overEllipsis{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

mixin傳參數

// 多行文本溢出, 傳參可控制 n行超出隱藏
@mixin multiOverEllipsis ($column) {overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: $column; -webkit-box-orient: vertical;}

/*參數帶有默認值的用法*/
// 圖片居中滿鋪
@mixin imgCoverParm($top: 50%, $ty: -50%){object-fit: cover; position: relative; top: $top; left: 50%; transform: translate(-50%,$ty);}

mixin在調用的時候，只須要用到@include指令

p.plain {
  color: #444;
  @include multiOverEllipsis(2); // 超過2行省略
}

/*編譯後*/
p.plain {
  color: #444;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

例如，我在設計移動端頁面佈局時，通常使用的都是flex佈局，經常使用的flex佈局都寫成了mixin

如需自取

@mixin text-elli {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
@mixin text-elli-two{overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

@mixin flex-lc {display: flex; justify-content: flex-start; align-items: center;}
@mixin flex-cc {display: flex; justify-content: center; align-items: center;}
@mixin flex-rc {display: flex; justify-content: flex-end; align-items: center;}
@mixin flex-bc {display: flex; justify-content: space-between; align-items: center;}
@mixin flex-ac {display: flex; justify-content: space-around; align-items: center;}
@mixin flex-lc-column {display: flex; flex-direction: column; justify-content: flex-start; align-items: center;}
@mixin flex-cc-column {display: flex; flex-direction: column; justify-content: center; align-items: center;}
@mixin flex-cl-column {display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
@mixin flex-lc-wrap {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
@mixin flex-cc-wrap {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

函數指令@function

// 轉百分比
@function transPer ($num) { @return ($num / 750) * 100 * 1% }
// fontSize 12px轉em
@function transEm ($num) { @return ceil(($num / 12) * 100) / 100 * 1em }

這種通常使用場景就是編寫，隨後可能修改的單個css屬性，好比

我在博達網站羣原有的項目上，設計佈局，爲了適配更多分辨率的屏幕，我將有些樣式採用了百分比佈局，但在真實的環境當中，存在媒體查詢，可能會有衝突，因此在編寫代碼的時候，我就使用

#sidebar { width: transPer(24); } // 24表明效果圖設計尺寸24px
/*編譯後*/
#sidebar { width: 3.2%; }

總結

scss真的超級靈活，僅僅是這幾指令，幫了我好大的忙，少些了n多行樣式。建議都試試，還有其餘@extend（繼承指令），#{}插值語法，等很強大的功能，我還沒用的，慢慢用起來。