SASS 基本语法与使用

SASS 是一种专门用于网页样式设计，然后再编译成正常的CSS文件的语言。SASS提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

安装和使用

SASS 用 Ruby 编写，使用 gem 安装。

$ gem install sass

使用

SASS文件是普通的文本文件，文件后缀名是.scss。在编写完 SASS 程序后，通过编译生成 .css 文件。

编译命令

sass test.scss test.css

SASS 提供四种编译选项:

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

最后一个选项一般用于生产环境

$ sass --style compressed test.sass test.css

SASS 可以监听某个文件或目录，在保存时自动编译。

// watch a file
sass --watch input.scss:output.css
// watch directory
sass --watch app/sass:public/css

语法

基础语法

变量
变量定义以 $ 开头

$blue: #ccc;
div {
    color: $blue;
}

---

字符串嵌套变量
变量需要写在 #{$var} 结构中

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

---

运算
SASS 可以使用运算

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

---

选择器嵌套

div {
    h1 {
        color: red;
    }
}

---

属性嵌套

p {
    border: {
        color: red;
    }
}

嵌套的代码内，使用& 引用父元素，a:hover 伪类可以写成

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

---

注释

/*
 * 标准注释，会保留到编译后的文件
 */

// 单行注释, 只保留在 SASS 源文件中，编译后被省略

/*!
 * 重要注释，压缩模式编译会保留,通常用于声明版权信息
 */

---

选择器继承
使用 @extend 命令 进行继承

$ddd: #ddd;
.class1 {
    border: 1px solid $ddd;
}
.calss2 {
    @extend .class1;
    font-size: 120%;
}

---

mixin 代码重用
使用 @mixin 定义一个代码块

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

使用 @include 调用 minxin

div {
    @include left;
}

mixin 指定参数和缺省值

@mixin right($value: 10px) {
    float: right;
    margin-right: $value;
}
// 根据需要加入参数
div {
    @include right(20px);
}

---

颜色函数
用于生成系列颜色

// lighten(#cc3, 10%);
// darken(#cc3, 10%);
// grayscale(#cc3, 10%);
// complement(#cc3)
div {
    background-color: lighten(#cc3, 10%);
}

---

引用文件

// 引用外部文件
@import "import.scss";
// 引用 css 文件
@import "import.css";

---

@if 条件语句

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

---

@else 命令

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

---

@for 循环语句

@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 命令

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

---

自定义函数与使用

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

参考

1. SASS用法指南 阮一峰
2. SASS documentation
3. sass offical website