你知道的和不知道的sass

關於sass，大多數人的認識一個寫css的工具而已

其實就是的

可是這個工具的威力你發揮了多少呢。。。

 

如下所有都是乾貨，但願你能用在本身的項目裏

定義集合

咱們一般是這麼定義變量的

$warning-color: #ffa200;
$success-color: #62AD47;
$danger-color: #EA4335;
$info-color: #369af3;

 

其實變量還能夠這麼定義

$colors: (warning $warning-color) (danger $danger-color) (success $success-color) (info $info-color); 

 

咱們定義了上邊的變量集合

這個有什麼用呢

 

遍歷對象

@each $color in $colors {
  $type: nth($color, 1);
  $value: nth($color, 2);

  .text-#{$type} {
    color: $value;
  }
}

咱們使用@each遍歷剛剛那個集合，nth是獲取集合的值

這個獲得的css是這樣的

.text-warning {
  color: #ffa200; }

.text-danger {
  color: #EA4335; }

.text-success {
  color: #62AD47; }

.text-info {
  color: #369af3; }

 

這樣咱們就能夠迅速的根據類型來擴展樣式了

 

循環

@for $i from 1 through 12 {
  .col-#{$i} {
    width: 100%/$i;
  }
}

 

經過for循環生成了一個簡單的佈局 ，結果是這樣的

.col-1 {
  width: 100%; }

.col-2 {
  width: 50%; }

.col-3 {
  width: 33.3333333333%; }

.col-4 {
  width: 25%; }

.col-5 {
  width: 20%; }

.col-6 {
  width: 16.6666666667%; }

.col-7 {
  width: 14.2857142857%; }

.col-8 {
  width: 12.5%; }

.col-9 {
  width: 11.1111111111%; }

.col-10 {
  width: 10%; }

.col-11 {
  width: 9.0909090909%; }

.col-12 {
  width: 8.3333333333%; }