sass 常用备忘案例详解

一、变量

所有变量以$开头，这是最基础也最常用的特性。比如你想统一管理一个项目的字体大小，直接定义$font_size: 12px，然后在容器里引用就行。看个例子：

$font_size: 12px;.container{    font-size: $font_size;}

变量还能用在字符串里，比如要拼接一个选择器边的方向，就必须用#{}把变量包起来，这样Sass才能正确解析。

$side : left;.rounded {    border-#{$side}: 1px solid #000;}

二、嵌套

层级嵌套是Sass最直观的写法，你不需要再写一堆重复的选择器。比如容器下的头部，直接写在.container里面就行。

.container{    display: none;    .header{        width: 100%;    }}

属性也能嵌套，比如border相关的属性，注意后面要加冒号。

.container {    border: {        width: 1px;    }}

还有个很实用的技巧：用&符号引用父元素，写伪类的时候特别顺手。

.link{    &:hover{         color: green;    }  }

三、mixin

简单理解，mixin就是可以重用的代码块。通过@include命令来调用。比如你经常要重置某个元素的轮廓样式，可以定义成mixin，需要的地方直接引入。

// mixin@mixin focus_style {    outline: none;}div {    @include focus_style; }

编译后生成

div {  outline: none; }

Mixin还支持参数和缺省值，这能力就强多了。比如定义高度，可以给个默认值200px，需要时再传值。

// 参数、缺省值@mixin the_height($h: 200px) {        height: $h;}.box_default {        @include the_height;}.box_not_default{        @include the_height(100px);}

编译后生成

.box_default {  height: 200px; }.box_not_default {  height: 100px; }

四、继承

通过@extend，一个选择器可以继承另一个选择器的样式，这在避免重复定义上非常有用。举个例子：

// 继承.class1{        float: left;}.class2{        @extend .class1;        width: 200px;}

编译后生成

.class1, .class2 {  float: left; }.class2 {  width: 200px; }

五、运算

运算能力让样式更像编程语言。直接上例子，一看就懂。

.container{        position: relative;        height: (200px/2);        width: 100px + 200px;        left: 50px * 2;        top: 50px - 10px;}

编译后生成

.container {  position: relative;  height: 100px;  width: 300px;  left: 100px;  top: 40px; }

插入文件

用@import 来插入外部文件，Sass会自动合并。

@import "outer.scss";

也可以插入普通css文件，注意写法不同。

@import "outer.css";

自定义函数

通过@function 可以定义自己的函数，实现更复杂的计算逻辑。比如让高度翻倍：

@function higher($h){        @return $h * 2;}.container{        height: higher(100px);}

编译后输出

.container {  height: 200px; }

注释

注释分两种风格。单行注释用//，编译后会被移除，适合开发过程中的临时说明。标准CSS注释用/* */，会保留到编译后的代码中。

// 单行注释，编译后消失

/* 标准的CSS注释，会保留到编译后的代码中 */

如果有些注释特别重要，在压缩编译后还想保留，可以在/* 后面加上感叹号。

/*!重要注释，压缩编译也不会消失*/