SCSS 和 SASS
scss 与 sass 的区别：sass 没有大括号和分号，每当一行结束都算作一个分号结束
声明
通用
- 变量声明：
1
$变量名:表达式
- 流量控制规则：如 @if 和 @each
- @error、@warn 和 @debug 规则
CSS 语句
- 样式规则：如 h1{/…/}
- css at 规则：如 @media
- Minxin 规则：使用 @include
- @at-root 规则
- @extend 规则只能在样式规则中使用
样式规则的属性声明
- 插值#{}：
1
#{$var}:$var
- 隐藏声明：声明的值为 null 或空不带引号的字符串，sass 不会编译为 css
- 前缀相同相当于命名空间，示例
1
2
3
4
5
6
7
8.enlarge {
font-size: 14px
transition: {
property: font-size; // 相当于transition-property
duration:4s; // 相当于transition-duration
delay:2s; // 相当于transition-delay
}
}
占位符选择器%
- 用来扩展,写完公共样式后,其它选择器用@extend 来使用，都会应用这个样式
高层声明：只能顶层使用
- 模块负载：使用 @use
- 导入：使用 @import
- 混合定义：使用 @mixin
- 函数定义：使用 @function
表达式
字面量
- 值列表：可以用空格或逗号分隔，并且可以用[]括起来,或者根本不加
- 映射：定义一组数据,通过变量与键来映射出具体值
其它表达方式
- 变量：$var
- 函数调用：
1
nth($list,1) or var(--main-bg-color)
- 特殊函数：
1
2calc(1px+100%)
or url(路径) - 父选择器：&
- 值!important：被解析为不带引号的字符串
父选择器&
- 注意：由于父选择器可以被类型选择器(如 h1)替换，因此『仅允许在复合选择器的开头使用』
- 添加后缀:
1
2&__copy
or &--copy - 使用场景:伪类或在父级前添加选择器:not(&)
- 在样式规则外使用返回 null,可做判断如：
1
#{if(&, '&.styleName', '.styleName')}
- 高级嵌套：匹配外部选择器和元素选择器，示例
1
2
3
4
5
6
7
8
9
10
11
12
13// scss
@use "sass:selector"
@mixin unify-parent($child)
@at-root #{selector.unify(&, $child)}
@content
.wrapper .field
@include unify-parent("input")
...
@include unify-parent("select")
...
// css
.wrapper input.field {...}
.wrapper select.field {...}
注释
在 scss 中
- 『//』：单行注释，也叫『无声注释』，不生成 css
- 『/**/』：多行注释，也被叫做『大声注释』，压缩模式下多行注释会被删除，但是以『/*！开头则不会被删除』
在 scss 中
- 『//』：//下一行的内容『缩进』也会被注释
文档注释(无声注释)
- 『///』：会解析成 markdown
变量
- 默认值：『!default』, 仅当该变量未定义或其值为 null 时，才会为该变量赋值
- 内置变量：无法修改
- 存在块作用域
- 全局标识：『!global』 只能用于设置已在文件顶层声明的变量。它不能用于声明新变量。
- 成为全局变量：在顶层书写，或者在块作用域内使用!global
- 流程控制范围：使用@if，作用域内的变量可以分配给外部变量但在分配前该变量已经声明
@规则
- @mixin和@include: 可以轻松重用样式块。
- @function: 定义了可在 SassScript 表达式中使用的自定义函数。
- @extend: 允许选择器相互继承样式。
- @at-root: 将样式放在 CSS 文档的根目录下。:将外部选择器添加为内部选择器
- @error: 会导致编译失败并显示错误消息。
- @warn: 在不完全停止编译的情况下打印警告。
- @debug: 打印一条消息以进行调试。
流程控制
- @if,@else，@else if：true 和 false 返回执行的部分
- @each：遍历列表的每一项，格式
1
@each $i in $items
- @for：使用 to，则排除最终数字，使用 through，则包含在内，格式
1
@for $i from 0 through 2
- @while：表达式为真，一直执行，格式
1
@while $var > $var2
来自 CSS
- @media：作媒体查询，也可作特性查询
1
@media(hover:hover) or @media(max-width:1200px)
- @supports：声明多个同样属性样式
- @keyframes：子规则必须是关键帧规则(from 或 to，20%)
值
数字:
- 不区分整数和小数，也可以有单位
- 相乘时单位相乘,相除时,从第一个数字获取分子单位,第二个获取分母单位
字符串:
- string.unquote(): 将带引号的字符串转为不带引号的字符串
- string.quote(): 将不带引号的字符串转为带引号的字符串
- 转义：在字符前添加\
- 不带引号的转义返回字符串，没有转义
- 带引号的字符串转义：unicode 中代表什么就等于什么
- string.index(“原字符串”,”要索引的字符”): 返回索引的位置(从 1 开始算)
- string.slice(“原字符串”,切割的长度)
列表:
- 索引：从 1 开始，负数索引为倒数
- 访问元素：获取列表中给定索引的元素
1
list.nth($list, $n)
- 遍历元素：
1
@each $i in $lists
- 添加到列表：添加元素在末尾不会破坏原来列表.
1
list.append($list,$val)
- 在列表中查找元素：不存在返回 null，可与@if 一起检查
1
list.index($list,$value)
- 列表的不可变性：返回新列表，不会修改原列表
- 任意参数 的 mixin 或函数时和 meta.keywords() 函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26// sass
@use "sass:meta";
@mixin syntax-colors($args...) {
@debug meta.keywords($args);
// (string: #080, comment: #800, variable: #60b)
@each $name, $color in meta.keywords($args) {
pre span.stx-#{$name} {
color: $color;
}
}
}
@include syntax-colors(
$string: #080,
$comment: #800,
$variable: #60b,
)
// css
pre span.stx-string {
color: #080;
}
pre span.stx-comment {
color: #800;
}
pre span.stx-variable {
color: #60b;
}
映射 map:
- 添加映射：
1
map.set($map,$key,$value)
- 合并两个现有映射：
1
map.merge()
- 查找一个值：
1
map.get($map, $key)
Boolean:
- @if $var {…}：结果为 true 返回
- if(true,10px,20px)：true 返回第二个参数,false,返回第三个参数
- false 和 null 为 false
null:
- 包含 null,省略
function
- meta.get-function(): 将函数名称作为值获取
- meta.call()：调用该函数
计算
- 计算：calc()
- 比较功能：min()、max()、clamp()
- 阶梯值函数：round()、mod()、rem()
- 三角函数：sin()、cos()、tan()、asin()、acos()、atan()、atan2()
- 指数函数：pow()、sqrt()、hypot()、log()、exp()
- 符号相关函数：abs()、sign()
