SASS详解之基本语法

　　SASS大家已经知道是什么东东了，电脑上也有编辑SASS的编程软件了，浏览器也能调试SASS了，那么我们接下来就直接步入正轨，准备迎接SASS的挑战，深入的了解一下SASS的用法吧。

　　SASS目前有两种语法。一种是SASS，这是一种旧版的SASS语法，也被成为缩进语法，其主要特点是去除了编写CSS时候的“{}”，让代码看起来比较整洁，其文件的后缀名是“.sass”。另一种是SCSS，我们这是我们现在常用的比较容易掌握的SASS语法，也是新版的SASS语法，其文件的后缀名是“.scss”。为大家介绍的SASS就是最新版本SCSS。旧版本在这里只是简单带过了。

 

　SASS的变量

　　相信广大的CSS编写人员都会遇到很多重复的属性值，那么这些重复带给我们的往往是分烦躁单一的复制粘贴。这将让我们的工作变得单一。若大家用SASS编写的话，我们只需要通过设置变量，就可以让整个编写过程中重复的东西变成变量化。变量的用处有很多，在一些日常的属性值中运用，可以在一些基本数学运算中运用，还可以在SASS函数中运用。

　　设定SASS变量，必须在变量前面添加“$”，后面紧变量名和变量值，而且变量名和变量值之间需要使用冒号“:”隔开。具体的实现方法如下。

　　SASS代码

/*设置变量*/$linkColor : green;$bgColor : yellow;$width : 700px;/*引用变量*/.variate {background:$bgColor;width:$width;}.variate a {color:$linkColor;}

　　编译后的CSS代码

.variate {  background: yellow;  width: 700px;}.variate a {  color: green;}

　SASS的嵌套

　　SASS的嵌套是SASS的第二个使用非常广泛的规则。SASS的嵌套能够让大家一目了然的看到其变成的结构。SASS的嵌套可以分为：属性嵌套和选择器嵌套。具体的实现方法如下。

　　1、属性嵌套

　　SASS代码

.AttributesNested {    font : {        size : 20px;        family : "宋体";        weight : bold;    }}

　　编译后的CSS代码

.AttributesNested {  font-size: 20px;  font-family: "宋体";  font-weight: bold;}

　　2、选择器嵌套

　　SASS代码

.chooserNested {    font-size:100px;    span {        font-size:30px;    }}

　　编译后的CSS代码

.chooserNested {  font-size: 100px;}.chooserNested span {  font-size: 30px;}

　SASS的模块化(Mixins)

　　在我们平时写CSS的时候，很多时候都是一模一样的属性，一模一样的属性值，我们多么多么的希望能够让他们独立起来，然后多次进行调用。而现在SASS能够让大家实现这么强大的功能。SASS的模块化(Mixins)是可以把一部分样式单独出来，作为单独定义的模块，然后可以被很多选择器重复使用。具体的实现方法如下。

　　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;}

　SASS的继承(extend)

　　在编写CSS的时候，大家都会碰到群组选择器，这种选择器的特性就是同时选取多个元素进行相同样式的编写。也可以理解为，一个选择器继承另一个选择器上的所有的样式。具体的实现方法如下。

　　SASS代码

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

　　编译后的CSS代码

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

　　以上编译后的CSS代码不难看出，多了个类名，而且还得需要注意优先级。然后在编译之后没必要出现那个多出来的类名。若大家不想多出那个类名，可以把“.”换成“%”。在上例的基础上做以调整。

　　SASS代码

%link {font-size:18px;}.inherit {@extend %link;}

　　编译后的CSS代码

.inherit {  font-size: 18px;}

　　SASS的变量、SASS的嵌套、SASS的模块化(Mixins)和SASS的继承(extend)就是SASS中比较常用的语法规则。大家若是掌握了上面这些，就能够用SASS进行编写样式了。SASS详解之基本语法就为大家介绍到这里，希望这篇SASS详解之基本语法能为大家了解SASS的基本语法有所帮助，只有掌握了基本语法，大家才能在此基础上更加深入的走下去。