scss使用

//混入
@mixin alert($text-color, $bg) {
  color: $text-color;
  background-color: $bg;

}

$colors:(light:#ffffff, dark:#000000);

.useMap{
  color:map-get($map: $colors, $key:datk )
}
.title-#{$version} {
  width: 300px;
  height: 40px;
  overflow: hidden;
  // @include alert(red, rgba(255, 255, 0, 0.719))
  color: map-get($map: $colors, $key: dark);//获取$colors里面的dark的值
  // color: map-keys($map: $colors);//获取$colors里面的dark的值
  &:before{
    content: #{$version};
    color: red;
  }
}

$version:"ss";



//使用through 1-4   用to关键字的话就不包含3
$columns: 4;
@for $n from 1 through $columns{    
  .col-#{$n}{
    width:100% /$columns * $n;
  }
}


$icons: success error warning;
@each $icon in $icons {
  .icon-#{$icon} {
    background-image:url(../image/icons/#{icon}.png)
  }
}

$i:6;
@while $i>0 {
  .item-#{$i} {
    width: 5px *$i;
  }

  $i:$i-2;
}


   background: lighten(#03AD79, 5); //变亮
    // background: darken(#03AD79,5); //变暗
    background: transparentize(#03AD79, 0.3); //变透明