首页 > 最近在写sass,发现代码重用性还是不够高,跟纯写css没多大优势目前的我来说。

最近在写sass,发现代码重用性还是不够高,跟纯写css没多大优势目前的我来说。

有没有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 '

【热门文章】
【热门文章】