Sass预处理器

Sass和Scss

在Sass中，有2种语法格式：（1）Sass格式；（2）Scss格式。也就是说，平常我们所说的Sass和Scss其实是同一个东西来的，统称为Sass。Sass和Scss仅仅是Sass的两种语法格式罢了。

一、Sass格式

Sass格式，是Sass的“旧版本语法”。这种语法格式，不使用大括号“{}”和分号“;”，而是使用严格的缩进式语法规则来书写，也就是类似Ruby语言的写法。

举例：

$color:white

$bgColor:red

body

color:$color

background-color:$bgColor

Sass格式是不使用大括号“{}”和分号“;”的，并且在body元素定义样式的时候，color和background-color这2个属性都是严格缩进的。

二、Scss格式

Scss格式，是Sass的“新版本语法”。这种语法格式，使用大括号“{}”和分号“;”，并不使用严格的缩进式语法规则来书写，也就是类似CSS书写的格式。

$color:white

$bgColor:red

body

{

    color:$color

    background-color:$bgColor

}

Scss格式跟平常我们写CSS的格式是一样的。

语法基础

一、Sass变量

在Sass中，我们声明变量使用的是“$”（美元符号）开头。Sass的变量包括3部分：声明符、变量名、值。

语法：