写点什么

CSS 页面设计稿构思与实现(二)

作者:Augus
  • 2021 年 11 月 10 日
  • 本文字数:510 字

    阅读完需:约 2 分钟

前言

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

用户头像

Augus

关注

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

某摸鱼集团

评论

发布
暂无评论
CSS页面设计稿构思与实现(二)