翻译自sass英文官方网站
sass入门
在你使用Sass之前，你需要先在你的项目中安装。如果你只是想浏览一下，那么请继续，但是我们建议你先去安装sass。安装教程请点击这里
写在前面
css本身很有意思，然而随着样式表变的越来越庞大，越来越复杂，它也变得越来越难以维护。所以css预处理器就应运而生。你可以使用一些在css中不存在的Sass特性，如变量、嵌套、混合、继承以及其他漂亮的功能，使css再次充满活力
在Sass完成开发后，sass文件能够被编译为正常的css文件运行在你的网页中
变量（Variables）
变量是用来存储你想要复用的样式信息。你可以存储像颜色、字体字号以及任何你想复用的css值。Sass使用$作为变量标志，示例如下
$highlight-color: #F90;
nav {
color: $highlight-color;
}
当Sass文件被编译后，我们定义的变量$highlight-color会生成常规的css值，放于我们使用的地方。
//编译后
nav {
color: #F90;
}
当我们在全局修改$highlight-color的值时，所有使用了这个变量的地方值都会发生相应改变
嵌套（Nesting）
我们在写HTML的时候会注意到它有很清晰的嵌套结构和层次。而在写对应的css却没有。Sass允许你把css选择器，按照html的层次进行嵌套。这里有一个典型的导航案例
nav {
height: 200px;
ul {
height: 100%;
li {
width: 40px;
float: left;
a {
color: #ddd;
}
}
}
}
相信你已经注意到，ul,'li'和a选择器被嵌套进了nav选择器中。这是组织css非常好的一个方式，并且让css变得更容易阅读。当你编译生成css后你会得到如下代码
nav {
height: 200px;
}
nav ul {
height: 100%;
}
nav ul li {
width: 40px;
}
nav ul li a {
color: #ddd;
}
Partials
你可以创建一个包含css代码片段的partials Sass文件，用于导入其他Sass文件。这有助于模块化你的css，使其更易于维护。一个Partial只不过是一个以下划线开头命名的Sass文件。你可以将其命名为_partial.scss等。这个下划线可以让sass知道这个文件只是一个partial文件，它会被一个css文件引用，并不把它单独作为一个文件输出。sass partials使用@import指令被引入到其他模块
导入（Import）
css有引入的操作，可以将项目的css文件拆分为一个个模块，每个模块都可以十分精简且易于维护。唯一的缺点就是每当你在页面中引入一个css，它都会创建一个HTTP请求。Sass在css的基础上开发的@import不会额外发起请求，它会把引入和被引入的文件结合为一个文件，所以在你的网页中只需要发起一个css请求。
我们可以这么说，你有两个Sass文件，_reset.scss和base.scss。我们想把_reset.scss导入到base.scss中。
@import 'reset';
请注意，我们是在base.scss中使用@import 'reset';当我们引入一个文件时不需要制定后缀.scss。Sass非常聪明，它会自动识别。当以执行编译操作时，你就会得到你想要的css文件
混合（Mixins）
在css中总是出现代码冗余的情况，特别是当你使用css3时存在很多前缀。使用混合器能帮助你把项目中想要复用的css代码段合并。你甚至能通过使用变量替换值使你的混合器更加灵活。对于自动前缀来说混合器是一个很好的简化代码方式，这里有一个关于rounded-corners的例子
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
你需要使用@mixin指令来创建一个混合器，并为其取一个名字。我们将这个混合器命名为border-raduis。我们也可以在函数括号中使用变量$radius，这样可以指定任意你想要的值。创建完混合器之后，接下来你就像使用一个css声明一样，在混合器名称之后配合@include使用它。生成css的文件如下
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
扩展和继承（Extend/Inheritance）
这是Sass中最有用的特性之一。使用@extend可以使一个选择器的css属性分享给另一个选择器。
.message {
font-size: 14px;
float: left;
}
.success {
color: green;
@extend .message;
}
.error {
color: red;
@extend .message;
}
.warning {
color: orange;
@extend .message;
}
上述代码是把.message中的css属性应用于.success、.error和warning中。生成的css文件中就发生了奇迹，这有助于我们避免去编写大量的html类名
.success {
color: green;
font-size: 14px;
float: left;
}
.error {
color: red;
font-size: 14px;
float: left;
}
.warning {
color: orange;
font-size: 14px;
float: left;
}
操作符（Operators）
在css中运用数学非常实用。Sass存在一些数学操作符标准，如+,-,*,/和%。在例子中我们会做一些简单的数学运算，使用aside&article来计算宽度。Sass会在不同单位间转换值
p {
width: 1in + 8pt;
}
编译为
p {
width: 1.111in;
}
网友评论