Sass
Sass，英文全称“Syntactically Awesome StyleSheets”，是对 CSS 的扩展。它添加了一些 CSS 语法不具有的新特性。Sass 让开发者维护样式表变得更简单。
Sass 有两种语法。第一种被称为 SCSS（Sassy CSS），它是 CSS 语法的扩充版本。也就是说，CSS 样式表也是合法的 SCSS 文件。这种语法的样式表文件以 .scss 为扩展名。
第二种比较古老的语法，就是所说的缩排语法（或者直接就称为“Sass”），它不使用花括号，而是通过缩排的方式来表达选择符的嵌套层级，它也不使用分号，而是用换行符来分隔属性。此种语法的样式表文件需要以 .sass 作为扩展名。
Sass：用 Sass 变量存储数据
<style type='text/sass'>
$main-fonts: Arial, sans-serif;
$headings-color: green;
//To use variables:
h1 {
font-family: $main-fonts;
color: $headings-color;
}
</style>
Sass：用 Sass 嵌套 CSS
nav {
background-color: red;
ul {
list-style: none;
li {
display: inline-block;
}
}
}
Sass：用 Mixins 创建可重用 CSS
@mixin box-shadow($x, $y, $blur, $c){
-webkit-box-shadow: $x, $y, $blur, $c;
-moz-box-shadow: $x, $y, $blur, $c;
-ms-box-shadow: $x, $y, $blur, $c;
box-shadow: $x, $y, $blur, $c;
}
div {
@include box-shadow(0px, 0px, 4px, #fff);
}
Sass：使用 @if 和 @else 为你的样式添加逻辑
<style type='text/sass'>
@mixin border-stroke($val) {
@if $val == light {
border: 1px solid black;
}
@else if $val == medium {
border: 3px solid black;
}
@else if $val == heavy {
border: 6px solid black;
}
@else {
border: none;
}
}
#box {
width: 150px;
height: 150px;
background-color: red;
@include border-stroke(medium);
}
</style>
Sass：使用 @for 创建一个 Sass 循环
@for $i from 1 through 12 {
.col-#{$i} { width: 100%/12 * $i; }
}
Sass：使用 @each 遍历列表中的项目
$colors: (color1: blue, color2: red, color3: green);
@each $key, $color in $colors {
.#{$color}-text {color: $color;}
}
Sass：使用 @while 当条件满足时样式生效
$x: 1;
@while $x< 13 {
.col-#{$x} { width: 100%/12 * $x;}
$x: $x + 1;
}
$x:1;
@while $x < 11 {
.text-#{$x} {
font-size: 2px + 10px*$x;
$x: $x + 1;
}
}
Sass：用 Partials 将你的样式分成小块
如果所有mixins都保存在名为 "_mixins.scss " 的partial中，并且在"main.scss "文件中需要它们，这是如何在主文件中使用它们：
// In the main.scss file
@import 'mixins'
Sass：将一组CSS样式扩展到另一个元素
Sass 有一个名为extend的功能，可以很容易地从一个元素中借用 CSS 规则并在另一个元素上重用它们。
.panel{
background-color: red;
height: 70px;
border: 2px solid green;
}
.big-panel{
@extend .panel;
width: 150px;
font-size: 2em;
}
