本文介绍了SASS的常用语法，平常使用的时候忘记的话可以来这里快速查看语法。

SASS常用语法

目录

  1. 把SASS文件编译成.css文件
  2. SASS基本用法
  3. SASS重用代码的方法
  4. SASS高级用法

我们知道，CSS不是一种编程语言，它没有变量、函数、条件语句、循环语句等，因此，我们在编写CSS的时候，只能一句一句地描述，写多的话会觉得很麻烦。

后来，有人为CSS加入了编程元素，这被叫做“CSS于处理器”。它的基本思想是：用一种专门的编程语言，进行网页样式的设计，然后再编译成CSS文件。

目前常用的CSS于处理器有3种：SASS、LESS和Stylus。本篇文章主要介绍SASS的常用语法。想要看更系统地学习SASS，请参考官方文档。

一、把SASS文件编译成.css文件

SASS文件就是普通的文本文件，里面可以直接使用CSS语法。后缀名一般是.scss，意思是Sassy CSS。

现在我们打开命令行（cmd，或者git Bash等），切换到SASS文件所在的目录，然后运行下面命令，就可以把.scss文件转化为css代码。（现在假设文件名为test）

  sass test.scss

如果想要保存为css文件，就运行下面的代码：

  sass test.scss test.css

（这里要注意： 如果编译后出现乱码，记得在原scss文件的开头加上：@charset "UTF-8";）

SASS提供4个编译风格的选项：

  • nested: Nested （嵌套）样式是 Sass 默认的输出格式，能够清晰反映 CSS 与 HTML 的结构关系。选择器与属性等单独占用一行，缩进量与 Sass 文件中一致，每行的缩进量反映了其在嵌套规则内的层数。当阅读大型 CSS 文件时，这种样式可以很容易地分析文件的主要结构。
  • expanded: Expanded 输出更像是手写的样式，选择器、属性等各占用一行，属性根据选择器缩进，而选择器不做任何缩进。
  • compact: Compact 输出方式比起上面两种占用的空间更少，每条 CSS 规则只占一行，包含其下的所有属性。嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。
  • compressed: Compressed 输出方式删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式。

4个编译风格的结果分别如下：

图片

图片

在生产环境中，一般使用最后一个选项：

  sass --style compressed test.scss test.css

你可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。(冒号前面是scss文件（目录），冒号后为编译后的css文件（目录）)

// watch a file 
sass --watch test.scss:test.css

// watch a directory
sass --watch app/sass:public/stylesheets

二、SASS基本用法

接下来我们来看看SASS的基本用法：【变量】、【运算】、【嵌套】、【注释】

1、变量

SASS可以使用变量，所有变量以 $ 开头

@charset "UTF-8";
$blue : #1875e7;
div {
  color : $blue;
}

编译成css文件：

div {
  color: #1875e7; }

如果变量需要写在字符串中（例如镶嵌在css属性名中），就必须写在 #{} 当中。

$side: top;

p {
  margin-#{$side}: 10px;
  border-#{$side}-left-radius: 3px;
}

编译成CSS文件：

p {
  margin-top: 10px;
  border-top-left-radius: 3px; }
2、运算

SASS允许在代码中使用算数表达式，也就是说，可以通过运算来得到css中属性的值了。

$var1: 5;
$var2: 10px;

body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var1 * 10%;
  left: $var2 * 5;
}

编译成CSS文件后：

body {
  margin: 7px;
  top: 150px;
  right: 50%; }
3、嵌套

SASS允许选择器嵌套。例如下面的css代码：

div h1 {
  color: red;
}

可以写成：

div {
  h1 {
    color: red;
  }
}

属性也是可以嵌套的，例如border-color属性，可以写成：

p {
  border: {
    color: red;
  }
}

注意，border后面必须加上冒号。

编译成CSS文件后：

p {
  border-color: red; }

在嵌套的代码块内，可以使用 & 来引用父元素，比如a:hover，可以写成：

a {
  &:hover {
    color: #1875e7;
  }
}

编译成CSS文件后：

a:hover {
  color: #1875e7; }

上面的 & 就代表着 a。

4、注释

SASS注释有两种风格。

  1. 标准的CSS注释 / comment / ，会保留到编译后的css文件中。
  2. 单行注释 //comment ，只会保存在.scss文件中，编译后会被省略。

在 /* 后面加一个感叹号，即 /*! ，表示是“重要注释”。即使是compressed模式编译，也会保留这行注释，通常可以用来声明版权信息。

/*!
  Copyright by Allenmind
*/

三、SASS重用代码的方法

接着来说下SASS中，让代码重用的方法。主要也分4部分：【继承】、【Mixin】、【颜色函数】、【插入文件】

1、继承

SASS允许一个选择器，继承另一个选择器。比如：现在有一个选择器.class1：

.class1 {
  border 1px solid #ddd;
}

选择器.class2要继承.class1，就要是用 @extend 命令：

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

编译后结果为：

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

.class2 {
  font-size: 120%; 
}
2、Mixin

Mixin有点像C语言的宏，是可以重用的代码块。

使用 @mixin 命令，定义一个代码块：

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

使用 @include 命令，调用这个mixin：

div {
  @include iAmLeft;
}

以上两段程序合起来编译成CSS文件后：

div {
  float: left;
  margin-left: 10px; }

mixin还有一个强大的地方，就是可以指定参数和缺省值：

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

使用的时候，根据需要加入参数（如果不指定参数，将会用定义mixin时参数的默认值，因此，如果在调用mixin（@include）时没有给定参数，在定义mixin时，就一定要给参数指定默认值，不然会报错）

div {
  @include iAmLeft(30px);
}

编译成CSS文件后：

div {
  float: left;
  margin-left: 30px; }

下面再来一个mixin实例，用来生成浏览器前缀：

@mixin  rounder($dir1, $dir2, $value) {
  border-#{$dir1}-#{$dir2}-radius: $value;
  -o-border-#{$dir1}-#{$dir2}-radius: $value;
  -moz-border-#{$dir1}-#{$dir2}-radius: $value;
  -webkit-border-#{$dir1}-#{$dir2}-radius: $value;
}

#navbar li {
  @include rounder(top, left, 5px);
}

编译成CSS文件后：

#navbar li {
  border-top-left-radius: 5px;
  -o-border-top-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  -webkit-border-top-left-radius: 5px; }
3、颜色函数

SASS提供了一些内置的颜色函数，以便生成系列颜色。

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329 
grayscale(#cc3) // #808080
complement(#cc3) //#33c

关于颜色函数更多的细节，请看：这里 和 这里

4、插入文件

当需要插入外部文件时，用@import命令：

@import "path/filename.scss";

如果插入的是.css文件，则等同与css的import命令。

@import "foo.css";

四、SASS高级用法

最后来看看SASS的高级用法。主要有：【条件语句】、【循环语句】、【自定义函数】

1、条件语句

@if 可以用来判断：

p {
  @if 1 + 1 == 2 { border: 1px solid #a30d14; }
  @if 5 < 3 { border: 2px dotted #555; }
}

编译成CSS文件后：

p {
  border: 1px solid #a30d14; }

还配有 @else 命令：

p {
  @if 1 + 1 > 2 {
    background-color: #000;
  } @else {
    background-color: #fff;
  }
}

编译成CSS文件后：

p {
  background-color: #fff; }
2、循环语句

SASS支持for循环，用 @for 命令：

@for $i from 1 to 4 {
  .border-#{$i} {
    border: #{$i} px;
  }
}

编译成CSS文件后：

.border-1 {
  border: 1 px; }

.border-2 {
  border: 2 px; }

.border-3 {
  border: 3 px; }

SASS也支持while循环，用 @while 命令：

$i: 6;
@while $i > 0 {
  .item-#{$i} {
    width: 2em * $i;
  }
  $i: $i - 2;
}

编译成CSS文件后：

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

第三种循环方法是each，用 @each 命令：

@each $member in a, b, c, d {
  .#{$member} {
    background-image: url("/image/#{$member}.jpg");
  }
}

编译成CSS文件后：

.a {
  background-image: url("/image/a.jpg"); }

.b {
  background-image: url("/image/b.jpg"); }

.c {
  background-image: url("/image/c.jpg"); }

.d {
  background-image: url("/image/d.jpg"); }
3、自定义函数

SASS允许自己编写函数，用 @function 命令：

@function double($n) {
  @return $n * 2;
}

#sidebar {
  width: double(5px);
}

编译成CSS文件后：

#sidebar {
  width: 10px; }