关于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%; }