sass 和 scss
sass 和 scss 的语法不一样，scss 语法很接近 css，而 sass 语法主要是不使用大括号和分号。
使用 sass 语法的文件后缀是 .sass 使用 scss 语法的文件后缀是 .scss。
scss 语法和 css 不同主要是，scss 可以嵌套选择器。
.main {
.box {
color: #000;
}
a {
&:hover {
background: orange;
}
}
}
其中&代表父选择器。
变量
定义变量是使用$开头，比如：
$text-color: #fff;
$height: 10px;
body {
color: $text-color;
}
使用变量可以让项目更好的维护和直观。
部分
我们可以将变量单独存放一个文件中，而 sass 不会编译创建一个专门的 css 文件。
partial 文件以_开头，如_variables.scss，然后再需要这些变量的文件中开头使用@import "variables";导入变量。
混入
混入可以让一段代码，多处使用。
@mixin warning {
color: #fff;
background: orange;
}
.warning-button {
@include warning;
font-size: 18px;
}
我们使用@mixin定义，使用@include使用。
我们还可以再 mixin 中使用其他选择器。
@mixin links {
a {
color: #000;
}
}
@include links;
body {
background: #fff;
}
和变量一样我们也可以将 mixin 单独放入一个 partial 文件中。
mixin 参数
@mixin color($color) {
color: $color;
}
@mixin box {
@include color(#fff);
background: #ccc;
}
mixin 还有默认参数，剩余参数。
@mixin shadow($shadows...) {
box-shadow: $shadows;
}
@mixin box($color: #fff, $bgc: #ccc) {
color: $color;
background: $bgc;
@include shadow(1px 2px 6px #fff, 2px 3px 0px #ccc);
}
.box {
@include box($bgc: #000);
}
content
mixin 还可以用 content 定义插槽。
@mixin ie6 {
* html {
@content;
}
}
@include ie6 {
body {
color: #fff;
}
}
导入
sass 保留了 css import 的功能。还添加了自己功能。
除了 partial 文件，partial 还可以添加其他 scss 文件。
我们可以使用 mixin 和 import 导入字体。
@mixin google-font($font) {
$font: unquote($font);
@import url(https://fonts.googleapis.com/?family=#{$font});
}
@include google-font("Alegreya+Sans");
#{}让 sass 知道 $font 是变量，unquote函数是去引号。
媒体查询
sass 中我们可以使用嵌套媒体查询。
#main {
@media only screen and (max-width: 960px) {
width: auto;
}
}
编译成 css 文件会将媒体查询提取到最外层。
我们还可以和 mixin 结合。
@mixin small-screens() {
@media only screen and (max-width: 320px) {
@content;
}
}
函数
css 中有许多函数，如rgb, hsl，sass 中也有许多内置函数。
除了内置函数，还可以自定义函数。
@function sum($a, $b) {
@return $a + $b;
}
@function strip-unit($v) {
@return $v / ($v * 0 + 1);
}
@function em($px, $f: 16px) {
@return ($px / $f) * 1em;
}
.box {
width: sum(10px, 90px);
}
我们通过@function定义函数，sass 中的值可以带有单位。
em函数将 px 转换成 em。strip-unit将单位去除。
继承
继承有点类似 mixin。
.base {
color: #fff;
}
.box {
@extend .base;
@extend .foo !optional;
background: #000;
}
使用@extend继承指定选择器的代码。而且只能继承单个选择器的代码比如.a.b，不能是.a .b。而且媒体查询中不能继承媒体查询外面的代码。
!optional表示有就继承，没有就算了。
还有就是可以继承占位符类（placeholder class）。
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend %message-shared;
}
占位符是以%开头。如果没有被使用则不会生成相应 css 代码。
继承和混入的区别在于，继承不会生成重复的代码，它是生成选择器来共用代码。而混入会重复相同的代码。
所以混入会增大 css 文件的大小。但是有人发现重复的代码比共用相同部分的代码性能更高。这也是有人会使用混入代替继承的原因。
条件
使用条件判断可以根据条件生成不同的代码，切换不同的主题。
$theme: dark;
$bgc: #000;
@if $theme == dark {
$text-color: #fff;
$bgc: #111;
font-size: 10px;
} @else if $theme == light {
$text-color: #eee;
} @else {
$bgc: #333;
}
循环
循环可以帮助快速编写重复的代码。sass 中有三种循环。
@for $i from 1 to 6 {
.col-#{$i} {
width: $i*5px;
}
}
@for $i from 1 through 6 {
.col-#{$i} {
width: $i*5px;
}
}
for 循环有两种写法，to和through，它们的区别是to不包括上界，如上面to为1到5。through为1到6.
$list: cat, dog, bird;
@each $ani in $list {
.#{$ani} {
background: url('/img/#{ani}.png');
}
}
$sizes: (small: 6px, medium: 10px, large: 20px);
@each $k, $v in $size {
.#{$k} {
font-size: $v;
}
}
each 循环几乎是用着做多的循环。
$i: 1;
while $i < 10 {
.pic-#{$i} {
width: $i * 10px;
}
$i: $i + 1;
}
while 循环和编程语言的差不多。
