sass入门初体验

接上文less入门初体验，接下来讲讲sass，sass有两种文件后缀名，一种是.sass，另一种是.scss。前者类似于ruby的语法规则，没有花括号，没有分号，具有严格的缩进；而后者更贴近于css的语法规则，易于阅读，更具语义性，所以本文采用.scss后缀名来编写sass代码

编译

---

1、Ruby:
sass是由Ruby语言编写的，所以我们可以通过Ruby来编辑sass代码，首先需要安装ruby，然后再安装sass，之后通过sass命令编译文件

sudo apt install ruby
sudo gem install sass
sass style.scss style.css

sass提供四个编译风格的选项:

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

生产环境中一般使用最后一个

sass --style compressed style.scss style.css

变量

---

变量使用以$开头(这也是我喜爱sass多于less的原因，谁不喜欢money呢？O(∩_∩)O哈哈~，开个玩笑)，如果变量需要在字符串中使用，只需要写在#{}中即可

$color:#999;
$side:left;
$bw:2px;
div {
    background-color: $color;
    border-#{$side}-width: $bw;
}

编译后:

div {
    background-color: #999;
    border-left-width: 2px;
}

Mixin(混合)

---

实现代码块的重用，使用@mixin定义一个代码块，通过@include就可以调用此代码块

@mixin b_r($radius:5px){
    -webkit-border-radius:$radius;
    -mz-border-radius:$radius;
    border-radius:$radius;
}
div1{
    @include b_r();
}
div2{
    @include b_r(10px);
}

编译后:

div1 {
    -webkit-border-radius: 5px;
    -mz-border-radius: 5px;
    border-radius: 5px;
}

div2 {
    -webkit-border-radius: 10px;
    -mz-border-radius: 10px;
    border-radius: 10px;
}

嵌套

---

与less类似，不多介绍

div {
    background-color: #333;
    a {
        text-decoration: none;
        &:hover {
            color: red;
        }
    }
}

编译后:

div {
    background-color: #333;
}
div a {
    text-decoration: none;
}
div a:hover {
    color: red;
}

运算

---

与less类似，不多介绍

$w:1000px;
body {
    width: $w/2;
    div {
        height: 100px*5;
    }
}

编译后:

body {
    width: 500px;
}
body div {
    height: 500px;
}

颜色函数

---

div {
    color: lighten(#ccc, 10%);
    background-color: darken(#999, 10%);
}

编译后:

div {
    color: #e6e6e6;
    background-color: gray;
}

注释

---

/* Hello Sass 我依然在这里 */
div1 {
    color: red;
}

// Hello Sass 我不见了
div2 {
    color: green;
}

/*!  Hello Sass 即使压缩了，我依然还在  */
div3 {
    color: blue;
}

编译后:

@charset "UTF-8";
/* Hello Sass 我依然在这里 */
div1 {
  color: red;
}

div2 {
  color: green;
}

/*!  Hello Sass 即使压缩了，我依然还在  */
div3 {
  color: blue;
}