CSS预处理器：SASS快速入门

在之前我写过一篇CSS进阶：LESS快速入门的文章，这次这个sass和less一样是css预处理器，同样对对css的编写提高不少的效率，虽然sass和less用法都差不多，但在网上浏览博客时，总是发现sass比less讨论的人更多，用的人也更多，所以说有必要把sass的基本用法也学习一下。

一、安装sass

sass是ruby语言写的，所以必须先安装ruby，然后再把sass装好。

如果你是使用webpack或者其它打包工具，可直接在项目中写sass，比如vue-cli搭建的vue项目，只需要安装sass的loader就可以直接使用了。

这里假定你已经安装好了ruby，接下来只需要在命令行里输入：

gem install sass

就可以使用sass了，这点相比less是比较麻烦的。

二、sass编译

如果你对css是一定的了解，那么对sass的理解也会更加的快，sass文件后缀名是.scss，意思是Sassy CSS。

通过下面的命令可以将.scss文件转化为css代码：

　sass test.scss

或者保存一个指定的css文件名：

sass test.scss test.css

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

* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。

在生产环境中，我们一般是使用compressed来编译

三、sass基本使用

1.变量

在sass中，所有变量以$开头

    $blue : #1875e7;　
　　div {
　　　color : $blue;
　　}

也可以将变量镶嵌在字符串中，就必须使用#{}

    $side : left;
　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}

2.计算功能

在sass中，同样可以使用算式：

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

3.嵌套

    div h1 {
　　　　color : red;
　　}

也可以这样写：

    div {
　　　　hi {
　　　　　　color:red;
　　　　}
　　}

就连属性也是可以嵌套的，比如说border-color属性，但是border必须加上冒号：

    p {
　　　　border: {
　　　　　　color: red;
　　　　}
　　}

在嵌套中，可以用&引用父元素，比如a:hover

   a {
　　　　&:hover { color: #ffb3ff; }
　　}

4.注释

据我了解less的注释只有一种，在编译时也不会被保留，而在sass中，有两种注释风格：
1. 标准css注释/* comment */ ，会保留到编译后的文件。
2. 单行注释：// comment，只会在sass文件中显示，编译后被省略。
像下面这样在/*加个!号是表示重要注释，编译后会保留，就算是压缩模式下的编译，通常放版权信息：

  /*! 
　　　　重要注释！
　　*/

四、sass代码重用

1.继承

在sass选择器中允许继承另一个选择器，比如说base:

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

base2继承base，就要使用@extend命令：

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

2.Mixin

sass中的Mixin像c语言中的宏,是可以重用的代码块，使用@mixin就可以定义：

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

使用@include调用上面这个mixin：

    div {
　　　　@include left;
　　}

mixin还可以指定参数和默认值：

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

可以不写参数，同样也可以写：

    div {
　　　　@include left(20px);
　　}
```　　
来看一个mixin实例，用来生成浏览器前缀：




<div class="se-preview-section-delimiter"></div>

```css
    @mixin rounded($vert, $horz, $radius: 10px) {
　　　　border-#{$vert}-#{$horz}-radius: $radius;
　　　　-moz-border-radius-#{$vert}#{$horz}: $radius;
　　　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
　　}
```　
这样调用：




<div class="se-preview-section-delimiter"></div>

```css
    #navbar li { @include rounded(top, left); }
　　#footer { @include rounded(top, left, 5px); }
```　




<div class="se-preview-section-delimiter"></div>

### 3.颜色函数
颜色函数可以很方便的生成一系列的颜色：




<div class="se-preview-section-delimiter"></div>

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

4.插入文件

和css引入同样，可以使用@import命令来插入外部文件：

　@import "path/file.scss";

四、sass高级用法

1.条件语句

支持使用@if语句：

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

还有配套的else命令：

　@if lightness($color) > 30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #fff;
　　}

2.循环语句

支持for循环，好像less不支持吧：

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

也可以使用while循环：

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

each循环：

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

3.自定义函数

还支持自定义函数：

　@function double($n) {
　　　　@return $n * 2;
　　}
　　#sidebar {
　　　　width: double(5px);
　　}

less和sass有很多相似之处，个人认为sass更加强大点，并且有团队长期维护，更加可靠，不过还是要根据个人需求或者公司的需求来进行选择，工具是死的，人是活的。

　@function double($n) {
　　　　@return $n * 2;
　　}
　　#sidebar {
　　　　width: double(5px);
　　}

less和sass有很多相似之处，个人认为sass更加强大点，并且有团队长期维护，更加可靠，不过还是要根据个人需求或者公司的需求来进行选择，工具是死的，人是活的。

原文地址：http://www.zcbboke.com/1639.html