。

Sass允许你使用诸如variabels#xff0c;nested

rules#xff0c;mixins#xff0c;functions等等语法#xff0c;这些都将在本篇的接下来进行讲解。

Sass是一种stylesheet语言可以被编译成CSS。

Sass允许你使用诸如variabelsnested

rulesmixinsfunctions等等语法这些都将在本篇的接下来进行讲解。

因为之前一直学的后端前端只是因为项目需要简单的写过一些前端样式和界面

。

通过对Sass基础的了解后感觉前端借助Sass具备了一点面向过程的感觉。

Variables

在原生的css中是没有变量这种说法的当我们想要写一个样式时只能像这样

body

当Sass被处理时将$font-stack和$primary-color放置到css中。

Nesting

的结构但是在css中却不提供嵌套的写法。

就变成下面这样显而易见相当的麻烦。

navul/ulli/li

Sass提供了解决方法你可以在写css的时候使用Sass语法来完成嵌套。

可以看到ulli被嵌套写入了nav中。

nav

Sass提供了模块化支持我们并不需要把所有的Sass写在单个文件里。

听上去似乎很像C语言里的.h文件是吧

下面给出一个例子

use关键字来引入_example.scss来达到复用的效果。

注意❗当一个.scss要被

use到主样式表styles.scss时那么给他取名的时候应该在最前面****一个_下划线。

当一个_aaa.scss文件没有被

scss:css命令构建项目时就不会生成该文件为aaa.css。

_example.scss

在css中写一些prefixes时总是会有点无聊这就是我大一时发誓“再也不碰前端”的原因繁琐的prefixes写起来真的有够让人难受的。

mixin指令允许我们定义一个可以在整个样式表中重复使用的样式。

比如当我们遇到下面这种令人无聊的情况时

.info

extend让你的样式分享到1个或者多个选择器上。

我们来看一个简单Demo。

.error,

}可以看到.success和.error的样式和.warning几乎相同这种情况下使用

This

}注意如果一个%stylesheet没有被extend的话就不会被编译生成。

Operators

Sass让数学运算在css中成为可能。

Sass提供了诸如-*math.div()%的运算符号至于代表什么运算我觉得没必要再说了。

.container