Sass语法规则及使用方法

Sass是一种css的扩展，可以使得css的编码更加强大和优雅。sass支持使用变量、条件、循环、嵌套、继承、mixin、函数等强大的功能。

Sass特点：

• 对css完全兼容
• 语言扩展，例如变量、嵌套、mixins
• 拥有大量函数，可以用来操作颜色及其他属性值
• 高级特性如control directives
• 可以自定义格式化输出

sass有两种语法格式，分别以sass和scss为后缀名。scss语法一般css相同，以大括号分隔作用域，以分号来分隔属性；而sass则以缩进分隔作用域，换行分隔属性。

//scss syntax div{  color: #ccc;}//sass syntaxdiv  color: #ccc

两种语法之间可以用sass-convert命令行来转换

# Convert Sass to SCSS$ sass-convert style.sass style.scss# Convert SCSS to Sass$ sass-convert style.scss style.sass

---

1. 使用Sass

sass是用ruby语言写的，因此在安装sass之前首先需要安装ruby，然后就可以用以下命令安装：

gem insall sass

将sass文件转换为css文件：

sass input.scss output.css

也可以监听sass文件的变化，并实时转换为css：

sass --watch input.scss:output.css

如果想要监听整个文件夹中的内容，也可以使用如下命令：

sass --watch app/sass:public/stylesheets

---

2. css扩展

2.1 嵌套选择器

sass允许嵌套使用css选择器，如下所示：

.out{  .inner{    color:#ccc;  }}

将被编译成

.out .inner {  color: #ccc; }

2.2 嵌套属性

css中有一大类属性是具有命名空间的，例如border-color、border-radius、border-image等。sass提供了更简洁的方法用于对这类属性的设置：

#main{  border:{    color: #ccc;    radius: 3px;    width: 1px;  }}

将被编译成

#main {  border-color: #ccc;  border-radius: 3px;  border-width: 1px; }

2.3 &：引用父选择器

& 表示对一个父选择器的使用，有时候使用&会使得样式表达更加简介，例如使用hover属性时：

a{  color:#1b6d85;  &:hover{    color: #de1d18;  }}

将被编译成

a {  color: #1b6d85; }  a:hover {    color: #de1d18; }

&也能添加后缀来构造新的选择器，例如：

#main{  color:#ccc;  &-side{    color:#aaa;  }}

将被编译成

#main {  color: #ccc; }  #main-side {    color: #aaa; }

---

3. 计算

3.1 变量

sass中加入了变量，变量以美元符号$开头，例如：

$gray:#ccc;

并使用$来引用变量

div{  color: $gray;}

如果变量在选择器外面定义，则属于全局变量，如果在选择器内部定义，则只能在该选择器作用范围内使用。当然也可以使用!global来将其声明为全局变量：

.global{  $blue:#00f !global;}

3.2 计算

SassScript支持对数值进行算数操作，包括加(+)、减(-)、乘(*)、除(/)、取余(%)。算数操作可以保留单位，比如下面两种加法都是合法的：

.operation{  height:1+1px;  width:1px+1px;}

将编译成

.operation {  height: 2px;  width: 2px; }

但是需要注意的是对于不同单位的数值（如px和em）不能进行算数操作。

对于乘法来说，如果两个数值具有相同的单位，相乘时会生成单位的平方，但是在css中单位的平方是不允许的。

而对于除法来说，由于css中已经存在除法表达式，如10px/2px，这种表达式在输出为css不会被计算成结果，除非由括号包围，正确的使用方式是10px/2。

对于减法，使用负号(-)时需要在两边有空格。

除此之外，算数操作中也可以使用变量。

.operation{   $width:5px;   width: $width*2;   height:2*2px;   font-size: 5px - 1px;   margin-bottom: (10px/5);   margin-left: (10px/5px);   margin-right: 10px/5px;   margin-top: 2px+10px/5px;}

将被编译成

.operation {  width: 10px;  height: 4px;  font-size: 4px;  margin-bottom: 2px;  margin-left: 2;  margin-right: 10px/5px;  margin-top: 4px; }

对于颜色值，rgb三个值是分开计算的，例如：

.color{  color: #001122+#002244;}

将被计算成

.color {  color: #003366; }

---

4. 表达式与函数

4.1 条件语句

条件语句以@if、@else if、@else为关键字

div {  @if ($width>2px) {    height: 5px;  } @else {    height: 10px;  }}

将被编译成

div {  height: 5px; }

4.2 循环语句

循环语句有三种形式：@for、@each、@while，@for和@while与普通循环相同，@each用于遍历list和map。

@for

@for有两种形式，分别是from (start) through (end)和from (start) to (end)，其区别是前者的范围是从start到end，后者的范围是从start到end-1

@for $var from 1 to 3{  .item-#{$var}{    width: 2px*$var;  }}

将被编译成

.item-1 {  width: 2px; }.item-2 {  width: 4px; }

@while

$var:3;@while $var>0{  $var : $var - 1;  .item-#{$var}{    width:$var px;   }}

将被编译成

.item-2 {  width: 2 px; }.item-1 {  width: 1 px; }.item-0 {  width: 0 px; }

@each

@each可用于遍历<list or map>中的变量

//遍历list@each $var in main, sider, foot {  .#{$var}-item {    color: #ccc;  }}

将被编译成

.main-item {  color: #ccc; }.sider-item {  color: #ccc; }.foot-item {  color: #ccc; }

//遍历map@each $key, $value in (main:5px, sider:10px, foot:5px) {  .#{$key} {    height: $value;  }}

将被编译成

.main {  height: 5px; }.sider {  height: 10px; }.foot {  height: 5px; }

4.3 函数

sass中使用@function定义函数，使用@return返回值，例如：

@function my_add($var1,$var2){  @return $var1 + $var2;}div{  width: my_add(1px,2px);}

将被编译成

div {  width: 3px; }

需要注意的是：函数定义名称中的下划线(_)和横线(-)是等同的，即上面的使用my-add(1px,2px)也是可以的。

---

5. 样式重用

5.1 @import

使用@import可以导入其他的sass文件，例如想要导入一个foo.scss文件，由于导入的默认后缀名为.scss和.sass，因此下面两中方式均可：

@import "foo.scss";

或

@import "foo";

虽然@import一般都在文档的头部使用，但也可以在css规则中使用，例如

在一个for-import.scss文件中包含

.im-test{  height: 10px;}

使用

div{  @import "for-import";}

将被编译成

div .im-test {  height: 10px; }

5.2 @extend

使用@extend可以继承另一个选择器的属性，例如happy类定义了基本属性，而very-happy类在具有happy类属性的同时还增加其他属性：

.happy{  height: 50px;  width: 50px;}.very-happy{  @extend .happy;  background-color: #5bc0de;}

将被编译成

.happy, .very-happy {  height: 50px;  width: 50px; }.very-happy {  background-color: #5bc0de; }

@extend的实际原理是所有继承的选择器出现的地方都应用当前选择器，例如下面所示，.happy下面的div、 hover属性都会被.very-happy继承：

.happy{  height: 50px;  width: 50px;}.happy div{  border: 1px;}.happy:hover{  color: #de1d18;}.very-happy{  @extend .happy;  background-color: #5bc0de;}

将被编译成

.happy, .very-happy {  height: 50px;  width: 50px; }.happy div, .very-happy div {  border: 1px; }.happy:hover, .very-happy:hover {  color: #de1d18; }.very-happy {  background-color: #5bc0de; }

此外@extend也支持多重继承、链式继承，在这里不作多述。

5.3 @mixin

@mixin可以用于定义一些可重用的样式，并用@include来引用这些样式，例如：

@mixin title{  font-size: 18px;  color: #222;}.top-title{  @include title;  margin: 10px;}

将被编译成

.top-title {  font-size: 18px;  color: #222;  margin: 10px; }

@mixin似乎与@extend非常相似，但@mixin强大的地方在于它可以传递参数,类似于函数：

@mixin title($color){  font-size: 18px;  color: $color;}.top-title{  @include title(#222);  margin: 10px;}

将被编译成

.top-title {  font-size: 18px;  color: #222;  margin: 10px; }