有没有sass未编译的代码啊 .
借鉴一下都是如何写的. 提高代码的重用性啊
换肤难道不需要一个map吗?
渐变难道不需要mixin吗?
网格布局,难道不需要mixin吗?
clearfix难道不需要placeholder吗?
语义化html难道还得在标签上叠加n多的类名?
总之,以前手工需要各种重复性的工作,费脑子的计算啦,都需要sass啊。
用了sass一段时间,忽略掉编译的时间打断,其它真是顺心顺手。
你可以直接看一下bootstrap的less源码,可以看出重用性还是很高的。
我觉得你认为不够高主要还是因为css总量不够大。
随手摘个例子:
scss
@mixin panel( $type: major, $with-close: true, $background-color: #fff, $border-radius: 2px, $inverse: false ) { @content; background-color: $background-color; border-radius: $border-radius; box-shadow: 0 1px 3px 0 transparentize(color(major), 0.5); .panel-heading { @include flash($type: $type, $inverse: $inverse, $border-radius: 0); border-color: transparent; border-top-left-radius: $border-radius; border-top-right-radius: $border-radius; } .panel-body { padding: 1em; color: adjust-color(color(major), $alpha: -0.15); p:last-child { margin-bottom: 0; } } .panel-footer { padding: 0.625em 1em; border-top: 1px solid color(major, tint); } }
刚写完的一个类似 bootstrap 的 panel 组件,变成 CSS 有多长我就不演示了,自己试试吧。所谓抽象的关键是要把变量摘出来并且能允许扩展时自定义,这样一套代码才可以实现无数种可能性。
你可以试着把自己常用的sass代码保存起来成一个lib,比如mixin之类的,要用的时候就' @import '