变量
在scss当中定义变量的语法如下
$变量名 : 变量值;
代码块外部定义的变量可以在全局范围内使用
在代码块内部定义的变量是局部变量
例如
1 | .box { |
如果该变量的值需要嵌入到字符串当中 , 需要加#{ }
1 | $side : left; |
默认变量
sass的默认变量一般用来设置默认值 , 然后根据需求来进行覆盖
例如
1 | $a_padding : 20px !default; |
如果对默认变量的值进行了覆盖 , 那么实际输出的就是覆盖之后的值 , 否则输出的就是默认值
如果是在一个单文件当中 , 并没有必要这样做
默认变量在组件化开发
的时候会非常有用
什么时候需要声明变量
- 该值至少重复出现了两次
- 该值至少可能会被更新一次
- 该值所有的表现都与变量有关
嵌套
使用嵌套的方式来编写css代码 , 可以使元素之间的层级关系更清晰 , 代码的可读性更强
选择器嵌套
1 | div { |
编译后的结果为
1 | div h1 { |
前面如果加上 >
可以作为父子选择器
在嵌套的代码块内 , 可以使用&
引用父元素
比如
1 | a { |
属性嵌套
有一些复合属性可以使用嵌套的方式来写
比如border
1 | p { |
注意 : border的后面必须要加上冒号
注释
SCSS可以有两种风格的注释
一种是标准的css注释 /* */
编译会保留
另一种是单行注释 //
, 编译过程不保留
Mixin
Mixin有点像C语言的宏定义 , 是可以重用的代码块
1 | //使用@mixin命令,定义一个代码块 |
mixin的强大之处 , 在于可以去指定参数和缺省值
1 | @mixin left($value:10px) { |
如果引入的时候不传参数 , 则使用缺省值
实例 : 生成浏览器前缀
1 | @mixin rounded($vert, $horz, $radius: 10px) { |
颜色函数
颜色函数是基于某个颜色进行的色彩调整
利用这些函数 , 可以很方便完成界面上风格统一的色彩搭配
涉及色彩的部分 , 可以很方便修改 , 完成主题风格的切换
1 | $base_color : chocolate; |
效果图
常用的颜色函数
darken
,lighten
- 调整亮度 , 变暗/变亮sturate
,desaturate
- 增加/减小 饱和度adjust-hue
- 调整 色相grayscale
- 灰度处理complement
- 色彩反相
文件引入
使用@import
引入另一个样式文件 , 可以是scss文件 , 也可以是css文件
1 | @import "path/filename.scss" |
继承
SASS允许一个选择器 , 继承另一个选择器
1 | .class1 { |
在编译过后 , 会生成
1 | .class1, .class2 { |
相比于mixin会生成很多重复的代码 , 这种方式能够对代码进行复用 , 有利于提高css解析的效率
流程控制
条件语句
使用@if
和@else
可以进行判断
1 | @if lightness($color) > 30% { |
循环语句
for循环
1 | @for $i from 1 to 10 { |
while循环
1 | $i: 6; |
each循环 , 类似于迭代器
1 | @each $member in a, b, c, d { |
自定义函数
使用@function
可以自定义一个函数
1 | @function double($n) { |
附 : 知识结构梳理