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