Campass + Scss ,让我们更优雅的编写CSS

如果你经常写CSS，你应该会发现传统的CSS编写方式或多或少有些枯燥，不智能？ 不优雅？ 至少我是这么认为的。

缺陷举例

1. 假设页面中有大部分HTML元素的背景颜色值是一样的,  我们就需要为各个元素加上 background-color:#fff 这样重复的CSS代码，当然，你也可以通过单独定义一个class, 为这个class设定 background-color:#fff, 然后把class应用到你想要到的HTML元素上，如果运用的合理，还算说的过去，否则结果就是你的HTML元素上面可能有很多个class, 在我看来这个很丑陋.

2. 假设你的HTML元素有好多层, 你需要为每层编写一些CSS, 结果可能会是

    .div1{ width: 800px;}

    .div1 .div1-1{width: 600px;}

    .div1 .div1-1 .div1-1-1{width:400px;}

    .div1 .div1-1 .div1-1-1 .div1-1-1-1{ width: 200px; }

    写到第四层, 我就已经感到有点枯燥了，因为我要重复的去把父元素包含进去, 而且后期也很不好维护

 

正因为现在的传统方式有种种的缺陷，所以诞生了scss, 参照官网 http://sass-lang.com/ 查看详细的介绍，简单的说，这个就是个编写CSS的框架，通过约定的语法来更智能的编写CSS

使用

1. 因为要依赖于ruby环境，所以如果你用的是Windows系统, 首先请下载 RubyInstaller,, http://www.rubyinstaller.org/

2. 安装完后, 如果你是win 8系统，请通过搜索并运行 'command prompt with Ruby'

3. 命令输入 gem install compass , 表示要安装 compass 框架, compass是个很方便的编写CSS的框架, 稍后再介绍，有兴趣请参见官网 http://compass-style.org/