CSS 架构之 Acss 层（中）

关注

发布于: 刚刚

前言

上一章我们说到可以把抽离的样式放到 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!

发布于: 刚刚阅读数: 2

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

发布

暂无评论

创作场景

CSS 架构之 Acss 层（中）

前言

优化 Acss 层

背景样式优化

边框优化

字体间距优化

Augus

评论