sass学习笔记——常用语法
下面是sass一般的常用语法，本文对此作个总结，方便日后回顾。
1. @import 导入文件
被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
@import "variables.css";
注：若在文件名前添加下划线，酱紫 Sass 就不编译这些文件，这个一般用于导入专门存放混合指令的scss文件。例子，将文件命名为 _colors.scss，便不会编译 _colours.css 文件。
@import "colors";
2. @media 媒体查询
Sass 中 @media 指令与 CSS 中用法一样，不多说。
3. @extend继承
@extend主要用于让子类共用父类的样式。话不多说直接上例子：
.title {
color: #555;
}
.title strong {
font-weight: 400;
}
.title-s {
@extend .title;
font-size: 20px;
}
.head-title {
@extend .title-s;
color: black;
}
编译为
.title, .title-s, .head-title {
color: #555; }
.title strong, .title-s strong, .head-title strong {
font-weight: 400; }
.title-s, .head-title {
font-size: 20px; }
.head-title {
color: black; }
注：一定要明确的知道父类的作用范围（特别是后代选择器的编写），否则很可能会出现编译出来的样式不符合预期效果的情况。
另：有时，需要定义一套专门通过@extend指令使用的样式，不需要把相对应的父类进行编译，则可以利用sass的“占位符选择器”。当使用占位符选择器——%时，对应样式不会被编译到 CSS 文件中。
#context a%extreme {
color: blue;
font-weight: bold;
font-size: 2em;
}
.notice {
@extend %extreme;
}
编译为
#context a.notice {
color: blue;
font-weight: bold;
font-size: 2em; }
4. @debug 调试输出
@debug 10em + 12em;编译为
Line 1 DEBUG: 22em
5. @mixin混合指令
@mixin混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class。话不多说直接上例子：
@mixin sexy-border($color, $width: 1px) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
编译为
p {
border-color: blue;
border-width: 1in;
border-style: dashed; }
h1 {
border-color: blue;
border-width: 2in;
border-style: dashed; }
上面这个例子是一个带有默认值的参数的混合指令,@mixin为打包好的样式块，后面的使用@include来引用这个样式块。
这个功能，个人感觉是在开发中使用最多的，把公用的样式包裹在一起，这大大简化了样式部分的书写，也使的公用的样式更容易管理。
6. 函数
Sass里面是有不少自带的函数的，可到官网文档上查询，下面这是自定义函数的使用：$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
编译为
#sidebar {
width: 240px; }
对于自定义函数，我自己也没怎么用过，暂时只知道其用法，至于如果更好的利用这个功能，还需进一步学习。
总结：
Sass常用的语法总结起来内容不多，这工具适用与编写较大的样式库，充分利用其语法可以很好的对样式库进行分模块管理，对于如何使用其建立一个样式库,bootsrtap可以作为一个很好的参考。
