Question

为什么需要将SASS和Compass融入CSS代码开发流程

Answer 1

我不得不承认，CSS非常棒，但是缺省的语法绝对的烂。你是不是也厌倦了CSS的书写方式呢？特别是当项目越来越大，代码堆积越来越多的时候。如果我们还是继续这种愚蠢的编码方式，那么对于CSS开发的人员来说。绝对是一个不省心的工作！
而当CSS编译器真正来到的时候，完全改变了我们的工作方式。今天我们将要讲解使用CSS编译器的诸多好处并且介绍你如何能够真正在工作中有效使用它。
Time to keep it simple, no time for the stupid!
会议一下作为前台开发人员，你写过多少次这样的代码?
ul { padding: 0px; margin: 0px; }
ul li { padding: 0px 5px; }
ul li a { color: #335345; }
ul li span { color: #434343; }
或许你也感叹过，我到底要写多少个ul li阿？ 真是无用功！
没错，的确是！
那么对于颜色，字体大小，或者margin/padding这些在CSS中随时重复的东西。试想一下，你如果想修改一些东西，确发现，你要修改的东西到处都有。这样情况大家都遇到过！绝对是噩梦！
你的样式表里的样式呢？是不是已经厌倦了老是使用同样的样式？修改样式？兄弟，这可不是简单的活儿！
怎么去解决这样的问题呢？ SASS！
编译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;
}

是不是简单明了。