为什么需要将SASS和Compass融入CSS代码开发流程 - CSS编译器帮助你提高CSS开发效率和乐趣

编译CSS？什么？没搞错吧？

不要大惊小怪！如果你不是一个熟悉终端的开发者，或者说是windows中的cmd。那么这里有很多的解决方案可能让你放弃选择终端来管理项目。不过这里让我们退一步说。

SASS赋予你修改你的CSS并且生成真正的CSS文件的能力。简单说来，它就是察看SASS文件，并且生成正确的CSS文件。

那么，如果你需要修改CSS，那么你就使用命令通过SASS文件来直接生成CSS文件。一旦你保存了SASS文件。就不需要管理CSS文件了。因为只需要花几秒，你就能生成需要的CSS。当然你需要时间来熟悉这些，不过对于开发来说，绝对值得！

样式嵌套

首先最让我喜欢的SASS和SCSS的地方在于语法拥有样式嵌套。这使得和你的样式结合使用起来非常的简单。例如，你有如下HTML：

<ul>
    <li>
        <a href="#">link 1</a>
    </li>
    <li class="last">
        <a href="#">link 2</a>
    </li>
</ul>

在SASS中，你将能够书写如下结构：

ul {
    padding: 0px;
    margin: 0px;
    width: 210px;
    li {
        float: left;
        width: 100px;
        margin: 0px 10px 0px 0px;
        &.last {
            margin: 0px;
        }
 
        a {
            color: #232323;
            &:hover {
                color: #121212;
            }
        }
    }
} 

是不是非常的清楚？ 最后你可以使用HTML里方式来嵌套你的CSS。你可以使用任何CSS选择器来使得流程更加简单！

我同样也添加了一些在SASS中经常使用的很多不错特性: "&" 标号。这个将告诉SASS来设定一个额外的规则。因此使用class .last定义的li元素将使用这个方法。不用去创建一个新的规则。悬浮的anchor标签也同样使用这个方法。非常实用！

变量，Mixin和选择器继承

样式代码片断的重用使得CSS非常的动态，这也是SASS最擅长的。

变量很简单。定义并且使用在你的SASS文件中：

$background: #040404;
$text-color: #fefefe;
$standard-margin: 16px;
 
body {
    background-color: $background;
    color: $text-color;
 
    input {
        background-color: $background;
        color: $text-color;
        margin: $standard-margin;
    }
}

定义了一个变量$varname：value并且在代码中使用$varname。

Mixin有点儿像变量但是主要为了样式片断。你可以告诉SASS冲用一部分的代码片断并且包含在样式里。你甚至可以指定参数使得他们动态。就像你给CSS写方法一样。

@mixin ptsans {
    font-family: 'PT Sans', sans-serif;
}
 
@mixin absolute-positioned($top, $left) {
    position: absolute;
    top: $top;
    left: $left;
}
 
body {
    @include ptsans;
    position: relative;
 
    #notifier {
        @include absolute-positioned(20px, 100px);
    }
}

使 用@mixin mixinname{这里写样式}来定义一个mixin ，或者使用@mixin mixinname($parameter1){somestyle:$parameter1}。非常适合重复的样式和CSS3的fallback内容。 你可以添加很多的样式到mixin里然后很方便的重用。

最后要说的是selector继承。这允许你像mixin那样取得一段样式，并且继承扩展它。这样你可以在实际的CSS中放入同样的代码，但是扩展CSS规则。这里举一个例子：

CSS源代码：

.error, .succes {
    border: 1px solid black;
    padding: 5px;
    color: red;
}
 
.succes {
    color: green;
    border-color: green;
}
 

SCSS：

.error {
    border: 1px solid black;
    padding: 5px;
    color: red;
}
 
.succes {
    .error;
    color: green;
    border-color: green;
}
 

是不是简单明了。

对于扩展继承教程，大家可以参考这个： http://sass-lang.com/tutorial.html

让我们使用Compass做的更完美

我没有介绍如何编译的原因在于我最近发现Compass去做这个。

好像SASS本身并不完美，Compass带来了额外的惊喜。它是基于SASS的一个层次，包含了很多的不错的小技巧。帮助你编译你的SASS代码，并且拥有很多选项。

安装Compass你可以查看这个： install page，如果你不想使用命令行的话，使用这个应用：http://compass.handlino.com，只需要付7美金就可以使用。当然，你可以选择自己编译。

为什么使用Compass？

• 拥有内建的CSS3 mixins
• 很多的实用的CSS 取代方法
• 很多辅助工具
• 输出SASS文件为压缩的CSS
• 非常好的文档

Compass有很多的内容，每天我都可以学到很多东西。

项目流程

当你开始一个Compass项目的时候，它会创建一些目录。根据你的配置文件，它会生成你需要的输出。

在配置中你可以定义SASS文件存放的地方，然后它会自动地监控目录变化。你也可以定义那个目录存放图片，那个目录存放输出的CSS目录。这些都可以放在不同的地方。

最不错的地方在于image-url，你是不是很讨厌这样的东西？

div { background: url(../../images/backgrounds/01.jpg); };

使用Compass可以将代码转化为：

div { background: image-url("backgrounds/01.jpg"); };

现在是不是更方便了！产生的CSS将会和上面一样，但是你的SASS文件组织更加清晰。

类似image-width和image-height会得到图片的宽和高，支持sprites和out of box的sticky footer让我们工作更加简单。

CSS3 mixins，没有 -webkit -moz和所有垃圾代码

开始我很厌烦CSS3的原因在于我要花费很多时间来处理不同浏览器属性，如：-webkit， -moz等等。这是我们厌烦使用CSS3的原因。

使用SASS的mixins和一些参数可以帮助你处理CSS3属性的时候节约大量的时间。Compass拥有很多这些CSS3Mixins。

就这一点来说使用Compass对我很有吸引力，例如：

div { @include border-radius(4px); }

本应该出现在CSS文件中。很幸运，SASS和Compass帮助我们解决了这个问题。

更多内容

这里有一个非常不错的演讲稿：http://speakerdeck.com/u/imathis/p/sass-compass-the-future-of-stylesheets-now，绝对值得你阅读

当然来自Jeffrey Way的教程也非常值得大家去学习：

http://net.tutsplus.com/tutorials/other/mastering-sass-lesson-1/

总结

这里有很多关于SASS和Compass的内容，并且也有很多的介绍内容。

使用这些complier可以有效地帮助你节约时间，并且使得CSS代码编辑变得更加有趣。更好的语法，可管理的代码，动态内容，所有都让CSS更加合理。

希望大家能够了解并且接受使用SASS和Compass，如果你有什么建议和想法，请给我们留言！

来源：为什么需要将SASS和Compass融入CSS代码开发流程 - CSS编译器帮助你提高CSS开发效率和乐趣