13.scss变量使用

场景：

使用动态的类名，分别对应不同的样式

实现：

使用@each循环遍历事前写好的list
语法：@each $var in <list>
$var可以是任何变量名，如：$item、$name
而 <list> 是一连串的值，也就是值列表

遍历list

scss提供list的嵌套，利用()运算符

// 例1：
.el-date-editor{
  $types:
    ('year' 74px),
    ('month' 98px),
    ('date' 122px),
    ('daterange' 220px);

  @each $item in $types {
    &--#{nth($item, 1)} { 
      width: nth($item, 2); 
    }
  }
}

// 解析为css：
.el-date-editor--year {
  width: 74px;
}

.el-date-editor--month {
  width: 98px;
}

.el-date-editor--date {
  width: 122px;
}

.el-date-editor--daterange {
  width: 220px;
}

// 例2
.el-date-editor{
  $types:
    ('year' 74px red),
    ('month' 98px blue);

  @each $item in $types {
    &--#{nth($item, 1)} { 
      width: nth($item, 2); 
    };
    .item-icon {
	  color: nth($item, 3);
	}
  }
}

// 解析为css：
.el-date-editor--year {
  width: 74px;
}

.el-date-editor .item-icon {
  color: red;
}

.el-date-editor--month {
  width: 98px;
}

.el-date-editor .item-icon {
  color: blue;
}