你知道的和不知道的sass

Posted 2021-01-05 白与小寒

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