安装 Sass

Sass 中文网

sass有两种后缀名文件

1. 一种后缀名为 sass，不使用大括号和分号
2. 另一种后缀名为 scss，这种和我们平时写的css文件格式差不多，使用大括号和分号。

编译 Sass

命令行编译

#sass 要编译的sass文件路径:编译完成后放到那里叫什么
sass sass/style.sass:css/style.css

自动编译

#sass --watch 要监听的文件:放到那个文件
sass --watch sass:css

编译格式

• nested 嵌套
• compact 紧凑
• expanded 扩展
• compressed 压缩

更改编译格式

sass --watch sass:css --style compressed

变量

sass使用 $ 符号来标识变量

$red-color: #f00;
$red-border: 1px solid $red-color;

// 变量引用
div {
    border: $red-border;
}

嵌套 CSS 规则

nav {
    height: 100px;
    ul {
        margin: 0;
        li {
            padding: 5px;
            list-style: none;
        }
    }
}

父选择器的标识符 &

a {
    color: blue;
    &:hover {
        color: red 
    }
}

嵌套属性

在 sass 中，除了CSS选择器，属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕，但是要反复写border-styleborder-widthborder-color以及border-*等也是非常烦人的。在sass中，你只需敲写一遍border：

nav {
    border: {
        style: solid;
        width: 1px;
        color: #ccc;
    }
}

Mixins

定义 mixin

通过 @mixin 加名称的方式就可以定义一个Mixins模块，在模块内你可以添加任何你想重复使用的样式。

@mixin 名字 (参数1, 参数2...) {
    ...
}

@mixin button {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
}

@mixin link {  
    a {  
        color: blue;

        &:visited {
            color: purple;
        }  
        &:hover {
            color: white;
        }  
        &:active {
            color: red;
        }  
    }
}

使用 @mixin 指令

你可以通过 @include 来调用具有相同名称的mixin模块。

.button-green {  
    @include button;  
    background-color: green;  
}

在mixin模块的定义中还可以包含其他的mixin。比如：

@mixin button-blue {  
    @include button;  
    @include link;  
}

参数的使用

Mixins可以接收和使用参数，这使得它比@extend更加强大和灵活。我更新了之前的button模块，增加了名为background的参数并将其传递给模块。

@mixin button($background) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: $background;  
}

注意到参数被设置为一个变量并成为backround属性的值。如果我们想创建一个绿色的按钮，那么就可以使用以下代码：

.button-green {  
    @include button(green);  
}

给参数设置默认值

你可能会好奇如果在定义mixin时定义了参数，但是在@include调用时没有传递参数会发生什么。这种情况下你会收到一个编译错误的提示。同时我相信这种情况一定不是你想看到的。你可以通过在mixin中定义参数的时候给它设置一个默认值，从而来避免这种错误。

@mixin button($background: green) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: $background;  
}

@extend 同步样式

.box {
    background-color: red;
}

div {
    @extend .box;
    color: #fff;
}

@import 引入其他 sass 文件

@import "base";

颜色

adjust-hue() 色相度数

adjust-hue(颜色，度数deg)

.box {
    background-color: adjust-hue(#f00, 180deg)
}

lighten 与 darken 颜色明度

lighten|darken(颜色，明度%)

.box {
    background-color: lighten(#f00, 50%)
}

.box {
    background-color: darken(#f00, 50%)
}

saturate 增加颜色纯度（饱和度）darken 减少颜色纯度（饱和度）

saturate|darken(颜色，饱和度%)

.box {
    background-color: lighten(#f00, 50%)
}

.box {
    background-color: darken(#f00, 50%)
}

transparentize 透明度 opacify 不透明度

transparentize|opacify(颜色, 0~1)

控制指令

@if

@if 条件 {
    ...
}

$use-prefixes: true;
.rounded {
    @if $use-prefixes {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
    }
    border-radius: 5px;
}

$theme: "dark";
body {
    @if $theme == dark {
        background-color: black;
    } @else @if $theme == light {
        background-color: white;
    } @else {
        background-color: grey;
    }
}

@for

@for $var from <开始值> through <结束值> {
    ...
}
$columns: 4;
// 包含4
@for $i from 1 through $columns{
    .col-#{$i} {
        width: 100% / $columns * $i;
    }
}

@for $var from <开始值> to <结束值> {
    ...
}
$columns: 4;
// 不包含4
@for $i from 1 to $columns{
    .col-#{$i} {
        width: 100% / $columns * $i;
    }
}

@each

@each $var in $list {
    ...
}

$icons: success error warning;
@each $icon in $icons {
    .icon-#{$icon} {
        background-image: url(./images/icons/#{$icon}.png)
    }
}

while

@while 条件 {
    ...
}

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

自定义函数

@function 名称 (参数1, 参数2...) {
    ...
}

$colors: (light: #fff, dark: #000);
@function color($key) {
    @return map-get($colors, $key);
}

body {
    background-color: color(light);
}

警告与错误

$colors: (light: #fff, dark: #000);
@function color($key) {
    @if not map-has-key($colors, $key) {
        @warn "在 $colors 里没有找到 #{$key} 这个 key";
    }
    @return map-get($colors, $key);
}

body {
    background-color: color(light);
}