sass之基础用法

1.使用原因

使用CSS预处理语言的一个主要原因是想利用Sass获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的CSS。Sass目前有两种语法，一种是SASS，这是旧版的SASS语法，主要特点是去除了编写CSS时候的{}，其文件的后缀名为".sass"。另一种是SCSS，是新版的sass，后缀名为".scss"。

2.变量

编写css的时候经常会遇到很多重复的属性值，可通过将这些重复的属性值赋给某个变量，在接下来的编写过程中，可将重复的属性值用这个变量代替。具体的实现代码如下。

/*设置变量*/
$linkColor : green;
$bgColor : yellow;
$width : 700px;


/*引用变量*/
.variate {
<span style="white-space:pre">	</span>background:$bgColor;
<span style="white-space:pre">	</span>width:$width;
}
.variate a {color:$linkColor;}

    可使用 在线SASS编译，编译后的CSS代码为

@charset "UTF-8";
/*设置变量*/
/*引用变量*/
.variate {
  background: yellow;
  width: 700px;
}

.variate a {
  color: green;
}

3. SASS嵌套

 

3.1 属性嵌套

      SASS的嵌套是SASS是第二个使用非常广泛的规则。SASS的嵌套使得结构能够一目了然。分为属性嵌套和选择器嵌套。具体的实现方法如下：

/*设置变量*/
$linkColor : green;
$bgColor : yellow;
$width : 700px;

/*引用变量*/
.variate {
	background:$bgColor;
	width:$width;
}
.variate a {color:$linkColor;}

编译后的CSS代码为：

/*设置变量*/
$linkColor : green;
$bgColor : yellow;
$width : 700px;

/*引用变量*/
.variate {
	background:$bgColor;
	width:$width;
}
.variate a {color:$linkColor;}

3.2 选择器嵌套

SASS代码如下：

/*设置变量*/
$linkColor : green;
$bgColor : yellow;
$width : 700px;

/*引用变量*/
.variate {
	background:$bgColor;
	width:$width;
}
.variate a {color:$linkColor;}

编译后的CSS代码如下：

/*设置变量*/
$linkColor : green;
$bgColor : yellow;
$width : 700px;

/*引用变量*/
.variate {
	background:$bgColor;
	width:$width;
}
.variate a {color:$linkColor;}

不过这种嵌套不要过多，根据bootstrap的CSS编写规范，最好不要超过3层嵌套，不然会降低CSS引擎的处理效率。

4. SASS的模块化(Mixins)

    在平时写CSS的时候，很多时候有一样的(属性，属性值)，可把这部分独立出现作为单独定义的模块，然后被选择器重复使用。例如以下的SASS代码

@mixin setBorder($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p { 
	@include setBorder(blue, 1px);
}

编译后的CSS代码为

p {
  border-color: blue;
  border-width: 1px;
  border-style: dashed;
}

5. SASS的继承(extend)

可以理解为一个选择器继承另一个选择器上的所有样式。具体的实现方法如下：

.link {
	font-size:18px;
}

.inherit {
	@extend .link;
}

编译后的代码如下：

.link, .inherit {
  font-size: 18px;
}

以上编译后的CSS代码多了一个类名，如果不需要这个多余的类名，可用"%"代替link的"."。