Sass从安装到常用技巧

强大的Css，作为前端开发的核心语言之一，有着大量丰富的样式与选择器供我们使用，我们可以通过css在浏览器上造出各种各样的“轮子”。但是作为一种静态文本语言，css也有其不足之处，比如说，既不能像js那样设置变量，也不能像java那样继承父类的属性，这也就使编写css的过程中，重复造了很多的轮子，不仅对咱们码农没啥实质性的提高，还让维护变得很不方便。

因此，为了弥补上面所说的缺点，sass诞生了。sass即css的预处理器，拥有变量、颜色代码或数值的基本运算、继承等等特性，安装和使用都十分的简单。

 

Sass的安装

 

Sass依赖于ruby环境，使用sass之前需要安装ruby，下载地址：http://rubyinstaller.org/downloads  

需要注意的是，ruby安装时需要勾选执行路径

 

安装完毕之后，运行ruby命令行

 

在命令行中输入gem install sass回车即可

 

安装完毕后，检测是否安装成功，如果能查看到版本号，即代表安装成功。

 

 

Sass的编译

 

Sass以.scss为后缀的文件完全兼容普通css的写法，但是浏览器是不能直接识别sass文件中的样式的，因此，我们编写了sass文件后，还需要将sass编译成浏览器能够运行的css文件，sass编译通常有两种方式：

1）koala软件编译

自动高效，操作简单，刚学sass的时候曾经用过，但是为了编译而多运行一个软件在我看来是比较多余的。

2）命令行编译

从命令行进入到sass文件目录后

编译一次sass

sass style.scss style.css

单文件监听编译（sass变动即自动保存）

sass --watch style.scss:style.css

文件夹监听编译

sass --watch sassFileDirectory:cssFileDirectory

*如果对编译出来的css文件格式有所要求，你可以在编译操作命令后面加入：

--style nested/expanded/compact/compressed

3）插件编译

Sublime、brackets等编辑器都带有自动编译的插件，感兴趣的童鞋可以搜一搜

 

Sass的语法

Sass文件后缀有两种，scss与sass，scss的语法与css相近，用{}分隔，从使用习惯上，我主要介绍实际应用中，scss文件的部分常用编写技巧。

 

变量

与php语法类似，sass中的变量名以$开头，如：

$baseColor:#eb1478;
p{
color:#eb1478;
}

 

多值变量

变量可以带有多个值，使用的时候可以在一个变量中选择不同的值，类似于数组，默认为第一个值

//一维

$size:1px 2px 3px 4px;

//二维

$size:1px 2px,3px 4px;
#size:(1px 2px),(3px,4px);
p{
Font-size:nth($size,1);
}

 

选择器嵌套

学css的时候，对选择器的使用我是十分蛋疼的，有时候需要选择同一个类下的多个不同元素，这时候就需要不停的复制这个类名，但是用了sass后就不用担心这个问题。例：

.class-name{
.class-name-2{
p{
&:hover{
 
}
&.big{
}
}
}
Div{
}
}

编译后：

.class-name .class-name-2{}
.class-name .class-name-2 p{}
.class-name .class-name-2 p:hover{}
.class-name .class-name-2 p.big{}
.class-name .class-name-2 div{}

 

其中的&标签相当于“并”的意思，是不是一下子少了很多的代码呢，这样的语法写着非常爽，仅凭这一点，我就成为了sass的忠实粉丝。并且，属性也可以类似的嵌套。

 

集合

虽然sass有了变量，但是有时候多个变量被一起重复的使用，这时候就可以使用集合

@mixin back-set{
background-size:cover;
background-repeat:no-repeat;
background-position:center;
}
 
div{
@include back-set;
}

 

继承

有了变量，相对来说继承我使用得就少一些了，继承可以使选择器继承另一个选择器所有的样式

.a{
font-size:12px;
}
p{
@extend .a;
}

 

for循环

Sass使用for循环可以带有参数，并且可以在循环内进行运算，这在多个子元素选择时非常有用

@for $i form 1 througn 3{
ul li:nth-child(#{$i}){
width:2px * $i;
}
}

 

导入其它sass

通常开始一个项目的时候就可以新建一个公共的基础sass，将一些公共样式写在一个文件里，这样既可以提高效率，又能提高后期的可维护性，引用时可以忽略.scss后缀

@import “common”;

*本文关于sass的介绍并不是特别全面，而是从使用频率的角度来写的，一些不全或者有误的地方欢迎指正
 
*参考文档http://www.w3cplus.com/sassguide/syntax.html