Sass預處理器經常使用功能（OneLine周分享）

寫做背景

---

最近在合做開發一個項目，使用到Sass預處理器，以爲Sass在對於項目中的開發仍是挺有用的，因此想分享給你們，但願對你們在實際項目開發中有所幫助。

什麼是Sass

---

簡單來講，Sass（Syntactically Awesome Style Sheets）是對CSS（層疊樣式表）的語法的一種擴充，能夠用它來定義一套新的語法規則和函數，以增強和提高CSS。經過這種新的編程語言，你可使用最高效的方式，以少許的代 碼建立複雜的設計。它改進並加強了CSS的能力，增長了變量，局部和函數這些特性。接下來我將會介紹一些咱們實際開發中Sass經常使用到的功能。

1.變量

---

變量是Sass中最經常使用到的功能，咱們一般會定義一些可複用的css屬性，好比顏色、字體大小等。經過$符號聲明變量，在使用的地方直接引入變量便可。

$color-red: #FF617F;

body:{
    color:$color-red;
}
複製代碼

2.嵌套

---

不知道你們在寫css樣式的時候有沒有遇到這樣一個問題，在父選擇器下面新增一個子選擇器，避免與其餘選擇器的樣式發生衝突，咱們通常都須要在寫子選擇器樣式的時候將父選擇器嵌在前面，這雖然避免了樣式的衝突，可是書寫起來比較麻煩，特別是一些嵌套比較深的選擇器，前面每每須要嵌很長的父選擇器，Sass的嵌套功能很好的解決了這個問題。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li { 
    display: inline-block; 
    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }
  }
}
複製代碼

輸出

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav ul li {
  display: inline-block; }
nav ul li a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }
複製代碼

3.混入

---

混合（Mixin）是經過申明一個函數，在函數內你能夠添加任何你想重複使用的樣式,經過傳參來改變樣式的內容。下面我來介紹一下Mixin的一些使用。

@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}
.container {
    @include clearfix;
}
複製代碼

經過@include調用

.container {
    @include clearfix;
}
複製代碼

咱們還能夠經過傳參來設置Mixin裏面的樣式，好比實現element-ui的button組件樣式，咱們能夠根據不一樣的button類型來改變button的顏色、邊框、背景等。

@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  border-radius: $border-radius;
  &.is-round {
    padding: $padding-vertical $padding-horizontal;
  }
}
複製代碼

使用

button--success {
    @include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color);
  }
  button--warning {
    @include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color);
  }
  button--danger {
    @include button-variant($--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color);
  }
複製代碼

4.@content

---

@content用在mixin裏面的，當定義一個mixin後，而且設置了@content； @include的時候能夠傳入相應的內容到mixin裏面。

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}
複製代碼

編譯後

.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}
複製代碼

5.Maps的函數

---

map-get($map,$key) 函數的做用是根據$key 參數，返回$key 在 $map 中對應的 value 值。若是 $key 不存在 $map中，將返回 null 值。使用場景以下：

$color: (
  title: #383D47,
  content: #4A505E,
  tip: #9AB0C6,
  error: #FF617F,
  warning: #FFBD3C
);

.button {
  color: map-get($color, title)
}
複製代碼

編譯結果：

.button {
  color: #383D47
}
複製代碼

總結

---

以上就是我開發中使用Sass中使用頻率比較高的功能，熟練使用能提升咱們的開發速率和代碼可維護性，但願個人分享對你們能帶來一些幫助。