SASS基础入门总结分享收藏

sass是css预处理器，完全兼容所有版本的CSS。

Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性，易于组织和维护。

SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。

安装：npm install sass

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

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

基本用法

1、变量

SASS允许使用变量，所有变量以$开头。

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

2、计算功能

SASS允许在代码中使用算式：

3、嵌套

SASS允许选择器嵌套。比如，下面的CSS代码：

可以写成：

属性也可以嵌套，比如border-color属性，可以写成：

注意，border后面必须加上冒号。

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

注释

SASS共有两种注释风格。

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

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

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

代码的重用

1、继承

SASS允许一个选择器，继承另一个选择器。比如，现有class1：

class2要继承class1，就要使用@extend命令：

2、Mixin

Mixin有点像C语言的宏（macro），是可以重用的代码块。

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

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

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

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

下面是一个mixin的实例，用来生成浏览器前缀。

使用的时候，可以像下面这样调用：

3、颜色函数

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

4、插入文件

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

@import "path/filename.scss";

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

@import "foo.css";

高级用法

1、条件语句

@if可以用来判断：

配套的还有@else命令：

2、循环语句

SASS支持for循环：

也支持while循环：

each命令，作用与for类似：

3、自定义函数

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