scss 变量_相比css, Sass/SCSS可以做什么？

解惑：Sass与SCSS

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass。

不同之处：

文件扩展名不同：Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名

出现时间不同：Sass版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。

语法书写方式不同：Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。让我们开始Sass /SCSS的奇妙之旅吧。

相比css, Sass/SCSS可以做什么？

1 Nested Rules: 嵌套规则，将CSS属性嵌套在多组{}中2 Variables: 变量。在sass中可通过$声明变量3 Operators: 可以使用加减乘除4 Functions: Sass 使您可以将 CSS 定义创建为可重用函数。5 代码流和控制语句：使用代码流和控制语句(例如for循环，while循环，if-else语句，类似于另一种语言)编写CSS。6 Mixins：创建一组CSS属性，然后重复使用它们或将其与任何新定义“混合”在一起。 Sass/SCSS语法讲解 01 嵌套规则

先来看看我们在css中的编写方式

Sass中允许CSS样式嵌套，如下图，

02 变量

$

在SCSS文件中，可以声明整个样式表文件中使用的变量，变量以$开头。

变量也有作用域：全局，局部，块级。如果需要将局部变量声明为全局变量，使用！global可以将局部变量声明为全局变量。

03 父元素&

使用&来声明父元素

最终输出为：

04 Mixins

定义一个@mixin来定义我们的默认行为，然后用@include来使用它。

05 算术运算符

加

减

乘

除

我们知道，css中的除法，例如下图，表示的是字体大小为25px和行高32px

而在Sass中使用时要注意,只有下面三种情况才会被视为除法运算：

如果值被圆括号包裹： (20px / 10px)

如果值是算数表达式的一部分： (10px + 20px / 10px)

如果值的一部分是变量或函数的返回值：$width / 10

而下面两种情况会被认为是css中的用法，而不会做除法

div { #{$font-size}/#{$line-height}; }

top:16px/24px

06 控制语句：if

尝试编写一个@mixin，用if语句来做判断，如果它大于边距，它将选择填充大小：

if()是一个函数形式，该语句将根据条件返回两个指定值之一：

@if是用于根据条件进行分支的指令：

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。

可以用if来判断父元素是否存在。

07 循环语句@for

from...through..:i的取值是1，2，3，4，5

from...to...的用法与上面类似，只不过不包括头尾的值，以上面的i取值，会是2，3，4。这里不再赘述。

综上，Sass/SCSS的基本用法就是这些。希望可以帮到你。