你知道的和不知道的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} {
     100%/$i;
  }
}

通过for循环生成了一个简单的布局 ，结果是这样的

.col-1 {
   100%; }

.col-2 {
   50%; }

.col-3 {
   33.3333333333%; }

.col-4 {
   25%; }

.col-5 {
   20%; }

.col-6 {
   16.6666666667%; }

.col-7 {
   14.2857142857%; }

.col-8 {
   12.5%; }

.col-9 {
   11.1111111111%; }

.col-10 {
   10%; }

.col-11 {
   9.0909090909%; }

.col-12 {
   8.3333333333%; }