预处理器sass的使用

sass是一种css预处理器，它是css的扩展语言。基本思想是：使用sass语言编写sass代码，最终编译为普通的css文件。sass让我们的css代码变得更加高效和可维护。但是sass也仅能够提高写css的效率，对于css而言还是要掌握好基础。

本篇文章总结一下sass的用法。

---

安装

由于sass由ruby编译，故而需要先安装ruby，而mac自带ruby。下面开始安装sass：

gem（需ruby）安装：

# gem换国内源
$ gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
# gem安装sass，如果遇到提示说没有写权限就加上sudo
$ sudo gem install sass

npm（需node）安装：

$ npm install -g sass
# or
$ cnpm install -g sass

brew安装：

$ brew install sass/sass/sass

window choco安装：

$ choco install sass

查看是否安装成功：

$ sass --version

使用

注意：sass文件扩展名为.scss

# 编译scss文件
$ sass style.scss

# 编译scss文件并保存至目标目录
$ sass style.scss style.css

sass提供四种编译风格：

1. nested：默认值，嵌套缩进的css代码。
2. expanded：没有缩进、扩展的css代码。
3. compact：简介的css代码。
4. compressed： 压缩的css代码。

生产环境使用第四种：

$ sass --style compressed style.scss style.css

sass监听：

# 监听文件
$ sass --watch style.scss:style.css

# 监听目录
$ sass --watch project/sass_dir

变量

语法：

$var: value;

sass变量可以是字符串、数字、颜色值、布尔值、列表还有null。

sass变量使用$符号开头，变量可以重复定义。

同一个变量定义了多次是可以的，不过作用域不同。

1. 定义并使用变量。

/*声明变量*/
$blue: rgb(0,99,99);

/*使用变量*/
div {
    color: $blue;
}

2. 如果变量需要嵌套在字符串中，就需要写在#{}中。

/*声明变量*/
$side: left;

/*属性名嵌套变量*/
.div {
    border-#{$side}-radius: 4px;
}

3. 计算

body {
    margin: (10px/2);
    madding: 10px + 20px;
    width: $var * 10%;
}

4. 嵌套

选择器嵌套

比如下面这个选择器是我们原生css的写法：

article section {
    color: #000;
}

在scss中的写法：

article {
    section {
        color: #000;
    }
}

!global关键字用来定义全局变量，如果有同名变量已经被定义过，则使用这个关键词可以覆盖：

$mycolor: yellow;
h1 {
    $mycolor: red !global;
    color: $mycolor;	//red
}
p {
    color: $mycolor;	//red
}

以上$mycolor是一个全局变量，全局可用。

一般来说对于全局变量，我们将它统一放在一个global.scss文件中，然后要用的使用使用@include来包含。

属性嵌套

原生css写法：

p {
    border-color: red;
    border-width: 1px;
}

改写带sass写法：

p {
    border: {
        color: red;
        width: 1px;
    }
}

就是将属性视为选择器，但是注意所有属性的后面要加上冒号。

使用&引用父元素：

原生css：

a:hover {
    color: red;
}

改写为sass:

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

这里的&就指代父元素a。

4.4 sass注释

三种注释方式按照权重排序：/*!重要注释*/ > /*注释*/ > //注释。

第一种：/*注释*/css原生注释，可以单行可以多行，在scss文件以及css文件中均被保留在原码中。

第二种：//注释，单行注释，在scss文件中，但是编译后的css文件中没有。

第三种：重要注释，写法：

/*!
	重要注释
*/

用出是表明这个注释非常重要，编译后依然存在，甚至压缩编译后依然存在。用于声明版权。

引入

@import用来引入外部文件：

@import "path/style.scss";
// import scss文件可以不带扩展名
@import "path/style"
    
// import css文件需要写全名
@import "path.style.css";

引入后就可以在当前文件使用import进来文件的变量

重用

1. 继承

sass允许一个选择器继承另一个选择器，使用@extend selector

// 先声明一个选择器的属性
.class_1 {
    border: 1px red solid;
}

// 另一个选择器继承上面的
.class_2 {
    @extend .class_1;
}

2. Mixin

Mixin用于定义一个代码块，用于后续重用。

定义代码块：@mixin selector {}，调用代码@@include selector;

// 定义代码块
@mixin block_left {
    float: left;
    margin-left: 10px;
}

// 调用代码块
div {
    @include block_left;
}

定义代码块的同时可以指定参数和缺省：

// 定义新的代码块和参数
@mixin block_left($value: 10px) {
    float: left;
    margin-left: $value;
}

// 使用
div {
    @include block_left(10px);
}

mixin中也可以混入：

@mixin mix3 {
    @include mix1;
    @include mix2;
}

颜色函数

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

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

partials

如果你不希望将一个 Sass 的代码文件编译到一个 CSS 文件，你可以在文件名的开头添加一个下划线。这将告诉 Sass 不要将其编译到 CSS 文件，比如_filename.scss

但是，在导入语句中我们不需要添加下划线，导入：@import filename.scss

不要将带下划线与不带下划线的同名文件放置在同一个目录下，比如，_colors.scss 和 colors.scss 不能同时存在于同一个目录下，否则带下划线的文件将会被忽略。

条件

@if

p {
    @if 1+1=2 {border: red 1px solid}
}

@else

@if 2>1 {
    border: 1px red solid;
} @else {
    border: 1px blue solid;
}

循环

@for循环：

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

@while循环：

$i: 6;

@while $i > 0 {
    div#{$i} {
        border: 1px red solid;
    }
    $i: $i - 1;
}

@each，作用类似于for：

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

自定义函数

// 定义一个double函数用于将参数double
@function double($n) {
    @return $n * 2;
}

// 调用double函数，并传参
#sidebar {
    with: double(100px);
}

注意点

1. 如果scss文件中有中文，则需要在文件最上方加入：

@charset "utf-8"

2. sass中的-和_作用相同。