解惑: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 循环语句@forfrom...through..:i的取值是1,2,3,4,5
from...to...的用法与上面类似,只不过不包括头尾的值,以上面的i取值,会是2,3,4。这里不再赘述。
综上,Sass/SCSS的基本用法就是这些。希望可以帮到你。