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

前言

上一章我们抽离了不同标签下的一些公共样式，相当于给不同的标签附上一个默认样式。当然可复用的样式肯定不止这些，还有一类样式，使用相同的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！！！