SCSS 样式

变量

$符号来标识变量；把反复使用的CSS属性值定义成变量。

$nav-color当前样式表都可以使用。$width只有nav{}里面才可以使用，当前样式表其他地方可以重复定义和使用。

$nav-color: #F90;
nav {
    $width: 100px;
    width: $width;
    color: $nav-color;
}

编译后

nav {
    width: 100px;
    color: #F90;
}

中划线和下划线等价

$link-color: blue;
a {
    color: $link_color;
}

编译后

a {
    color: blue;
}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

$side : left;
.rounded {
    border-#{$side}-radius: 5px;
}

编译后

.rounded {
    border-left-radius: 5px;
}

变量中可存在变量

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;

嵌套

选择器嵌套

#content {
    article {
        h1 { color: #333 }
        p { margin-bottom: 1.4em }
    }
    aside { background-color: #EEE }
}

编译后

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

属性嵌套

比如border-color属性，可以写成：

p {
    border: { // 注意：border 后面必须加上冒号。
        color: red;
    }
}

使用 & 引用父元素

比如a:hover伪类，可以写成：

a {
    &:hover { color: #ffb3ff; }
}

计算功能

数字运算

支持数字的加减乘除、取整等运算（+、-、*、/、%）

$var: 20px;
body {
    margin: (14px/2);
    top: 50px + 100px;
    right: $var * 10%;
}

字符串运算

+可用于连接字符串

有引号字符串（位于+左侧）连接无引号字符串，运算结果是有引号的。

无引号字符串（位于+左侧）连接有引号字符串，运算结果则没有引号。

p:before { 
    content: "Foo " + Bar;  
    font-family: sans- + "serif";
}

编译后

p:before {
    content: "Foo Bar";
    font-family: sans-serif;
}

+两边都没有引号

p {
    cursor: e + -resize;
}

编译后

p {
    cursor: e-resize;
}

继承

继承是基于类class的（有时是基于其他类型的选择器）

.class1 {
    border: 1px solid #ddd;
}

使用@extend让class2继承class1的样式

.class2 {
    @extend .class1;
    font-size:120%;
 }

混合器

@mixin

@mixin left {
    float: left;
    margin-left: 10px;
}

使用@include命令，调用名为left的mixin

div {
    @include left;
}

可以指定参数和默认值

@mixin left($value: 10px) {
    float: left;
    margin-right: $value;
}

可以指定参数，或使用默认值

div {
    @include left(20px);
}

导入文件

被导入的文件将合并编译到同一个CSS文件中。而且，被导入的文件中所包含的变量或者混合指令都可以在导入的文件中使用。

@import "foo.scss"; // 都会导入文件 foo.scss
@import "foo"; // 都会导入文件 foo.scss
@import "http://foo.com/bar"; // 插入外部文件
@import "foo.css"; // 等同于 CSS 的 import 命令。