小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

上一章我们说到可以把抽离的样式放到 Acss 层中。那对于Acss中逻辑重复的代码，我们是不是可以更近一步优化呢？接下让我们看看，如何优化他。

优化Acss层

// setting.scss
$color-primary: #FF5777;
$color-white: #FFFFFF;
$color-black: #000000;

// acss.scss
[bg-primary] {
  background-color: #FF5777;
}
[bg-white] {
  background-color: #FFFFFF;
}
[bg-black] {
  background-color: #000000;
}

如上，我们的Acss层，下面可能有如上代码，我们可以看到，都是设置background-color，那我们是不是可以通过一个循环得到呢？结果是可以的。

背景样式优化

// acss.scss
@each $style in (primary $color-primary, white $color-white, black $color-black) {
  [bg-#{nth($style, 1)}] {
    background-color: #{nth($style, 2)};
  }
}

如上，我们就可以实现了。

当然，我们也可以对透明度做一个简写。

// acss.scss
@each $i in 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1 {
  [bgo#{$i * 10}] { 
    background-color: rgba(0, 0, 0, $i);
  }
}

上面代码，就如同下面代码一样。

[bgo1] {
  background-color: rgba(0, 0, 0, 0.1);
}
[bgo2] {
  background-color: rgba(0, 0, 0, 0.2);
}
[bgo3] {
   background-color: rgba(0, 0, 0, 0.33;
}

...

[bgo10] {
  background-color: rgba(0, 0, 0, 1);
}

边框优化

@for $i from 1 through 10 {
  [radius#{$i}] { 
    border-radius: #{$i}px;
    overflow: hidden;
  }
}

[circle] {
  border-radius: 100rem;
}

字体间距优化

@for $i from 13 through 50 {
  [fz#{$i * 2}] { 
    font-size: #{$i * 2}px;
  }
}

间距等等等，

$direction: (l left, r right, t top, b bottom);
@for $i from 1 through 30 {
  @each $type in m, p, v, h, a{
    
    @if $type == m {
      @each $d in $direction{
        [m#{nth($d, 1)}#{$i}] {
          margin-#{nth($d, 2)}: #{$i}px;
        }
      }
    }

    @else if $type == p {
      @each $d in $direction{
        [p#{nth($d, 1)}#{$i}] {
          padding-#{nth($d, 2)}: #{$i}px;
        }
      }
    }

    @else if $type == h {
      [ph#{$i}] {
        padding-left: #{$i}px;
        padding-right: #{$i}px;
      }

      [mh#{$i}] {
        margin-left: #{$i}px;
        margin-right: #{$i}px;
      }
    }

    @else if $type == v {
      [pv#{$i}] {
        padding-top: #{$i}px;
        padding-bottom: #{$i}px;
      }
    }

    @else {
      [pa#{$i}] {
        padding: #{$i}px;
      }
    }
  }
}

好，今天就到这里了。Bye!