SASS笔记

Posted 2020-08-15

安装

因为SASS是Ruby语言写的，但两者的语法没有关系，所以我们必须先安装Ruby，然后再安装SASS。

安装好Ruby之后，在命令行输入：gem install sass

然后就可以使用了。

使用

SASS文件的后缀名是.scss，意思是Sassy CSS。

下面的命令可以在屏幕上显示.scss文件转化的css代码（假设文件名是test）: sass test.scss

如果要将显示结果保存为文件，后面再跟一个.css文件名：sass test.scss test.css

SASS提供四个编译风格的选项：

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

　　b. expanded：没有缩进的、拓展的css代码

　　c. compact：简介格式的css代码

　　d. compressed：压缩后的css代码

生产环境中一般使用最后一个选项：sass --style compressed test.sass test.css

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

// watch a file

　　sass --watch input.scss:output.css

// watch a directory

　　sass --watch app/sass:public/stylesheets

基本使用

1. 变量

所有变量均以$开头，如 $blue: #1875e7

如果变量需要镶嵌在字符串之中，就必须写在#{}之中

如：

$side: left
.rounded {

　　border-#{side}-radius: 5px;

}

2. 计算功能

SASS允许在代码中使用算式，如：margin: (14px + 25px)/2

3. 嵌套

SASS允许选择器嵌套，属性也可以嵌套,比如border-color属性

p {

　　border: { // 注意border这里必须加冒号

　　　　color : red;

　　}

}

在嵌套的代码块内，可以引用&引用父元素，比如a:hover伪类，可以写成：

a {

　　&: hover { color: #ffb3ff; }

}

4. 注释

SASS共有两种注释风格。

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

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

在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

代码的重用

1. 继承

SASS允许一个选择器继承另一个选择器

. class1  { border: 1px solid #ddd; }

class2要继承class1, 就要使用@extend命令： .class2 { @extend .class1; }

2. Mixin

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

使用@include命令，调用这个mixin

mixin的强大之处，在于可以指定参数和缺省值

@mixin left($value: 10px) {

　　margin-right: $value;

}

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

div { @include left(20px))}

3. 颜色函数

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

　　lighten(#cc3, 10%) // #d6d65c

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

4. 插入函数

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

@import "path/filename.scss"

高级用法

1. 条件语句

@if可以用来判断：

p {

　　@if 1+1==2 {}

　　@else {}

}

2. 循环语句

SASS支持for和while循环

@for $i from 1 to 10 {

　　.border-#{$i} {

　　　　border: #{$i}px solid blue;

　　}

}

3. 自定义函数

SASS允许用户编写自己的函数

@function double($n) {

　　@return $n*2;

}

#sidebar {

　　width: double(5px);

}