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

Question

有没有sass未编译的代码啊 .

借鉴一下都是如何写的. 提高代码的重用性啊

Answer 1

你可以直接看一下bootstrap的less源码，可以看出重用性还是很高的。

我觉得你认为不够高主要还是因为css总量不够大。

Answer 2

你可以试着把自己常用的sass代码保存起来成一个lib，比如mixin之类的，要用的时候就' @import '

Answer 3

随手摘个例子：

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 有多长我就不演示了，自己试试吧。所谓抽象的关键是要把变量摘出来并且能允许扩展时自定义，这样一套代码才可以实现无数种可能性。

Answer 4

换肤难道不需要一个map吗？
渐变难道不需要mixin吗？
网格布局，难道不需要mixin吗？
clearfix难道不需要placeholder吗？
语义化html难道还得在标签上叠加n多的类名？

总之，以前手工需要各种重复性的工作，费脑子的计算啦，都需要sass啊。
用了sass一段时间，忽略掉编译的时间打断，其它真是顺心顺手。