前言

上一章我们抽离了不同标签下的一些公共样式，相当于给不同的标签附上一个默认样式。当然可复用的样式肯定不止这些，还有一类样式，使用相同的 css 语法，但是作用于不同的标签，我们也可以把他抽离出来，而这类样式我们可以把它归为原子样式。

抽离可复用的原子样式

我们已上图的页面设计稿为例，进行我们的原子样式抽离。

我们可以看到设计稿中有很多圆形。我们就可以把这个样式通过属性选择器的形式提炼到 acss 层中。

[circle] {  border-radius: 50%;}

@for $i from 1 through 10 {  [radius#{$i}] {     border-radius: #{$i}Px;    overflow: hidden;  }
@for $i from 2 through 50 {  [ml#{$i}] {     margin-left: #{$i}px;  }}
@for $i from 2 through 50 {  [mr#{$i}] {     margin-right: #{$i}px;  }}

需要注意的是，我们抽离的原子样式，并不是说着里用了一下，那里用了一下，就可以抽离成原子样式了。原子样式也就是公共样式，它作用的是所有页面，所以我们需要观察整个设计稿，而不是说只是一个页面（上图的只是举例），再把它抽离出来，放到 acss 层中。

好，今天就到这里了，今天努力的你依然是最棒的。加油，加油，你最棒！加油，加油，你最强！哦豁，Bye Bye！！！