SASS：CSS预处理器

1、安装

SASS是Ruby语言写的，但是两者的语法没有关系。先安装Ruby，然后再安装SASS。

Ruby安装好后，安装SASS：

gem install sass

2、SASS有四种编译风格

nested：嵌套缩进的css代码，它是默认值。

expanded：没有缩进的、扩展的css代码。

compact：简洁格式的css代码。

compressed：压缩后的css代码。

生产环境一般用最后一个：

sass --style compressed test.sass test.css

3、使用

可以在屏幕上显示.scss文件转化的css代码

sass test.scss

如果要将显示结果保存成文件，后面再跟一个.css文件名

sass test.scss test.css

也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本

//watch a file

sass --watch test.scss:test.css

//watch a directory

sass --watch app/sass:public/stylesheets

4、变量

所有变量以$开头

$blue : #1875e7;

div {
    color: $blue;
}

如果变量要镶嵌在字符串中，写在#{}中

$side : right;
$margin : 10px;

div {
    margin-#{$side}: $margin;
} 

5、计算功能

SASS支持代码中使用算式

$var : 100px;

div {
    margin: (20px/2);
    top: 100px + 20px;
    left: $var * 10%; 
}

6、嵌套

选择器嵌套

div {
    h1 {
        font-size: 12px;
    }
}

属性嵌套

p {
    background: {
        color: red;
    }
}

在代码块内，可以用&引用父元素

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

7、注释

SASS注释风格

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

单行注释 //comment ，只保留在SASS源文件中

重要注释/*！comment*/，即使是压缩模式编译，也会保留，通常用于声明版本信息

8、继承

.class1 {
    color: red;
}

使用@extend命令继承

.class2 {
    @extend .class1;
    font-size:12px;
}

9、Mixin

使用@Mixin命令，定义一个代码块

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

使用@include命令，调用mixin

div {
    @include left;
}

mixin可以指定参数和缺省值

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

使用的时候，根据需要加入参数

div {
    @include left(20px);
}

生成浏览器前缀实例

@mixin rounded($vert, $horz, $radius: 10px) {
    border-#{$vert)-#{$horz}-radius: $radius;
    -moz-border-radius-#{$vart}-#{$horz}: $radius;
    -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

调用

li {
    @include rounded(top, left);
}
p {
    @include rounded(top, left, 5px);
}

10、颜色函数

SASS提供了一些内置的颜色函数，以便生成系列颜色

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

11、插入文件

@import命令，用来插入外部文件

@import "path/filename.scss";

如果插入的是css文件，等同于css的import命令

@import "foo.css";

12、条件语句

@if

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

@else

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

13、循环语句

for循环

@for $i form 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");
    }
}

14、自定义函数

@function double($n) {
    @return $n * 2;
}

#sidebar {
    width: double(5px);
}