本地搭建scss学习环境
cd scss-1
npm init -y
npm i -D parcel
npx parcel index.html
mixin
image.png
image.png
placeholder
image.png
选择器扩展
BEM 命名法
image.png
嵌套选择器
& 符号 + 嵌套属性
.userCard {
width: 100px;
&.active {
background: yellow;
}
&-name {
color: red;
font: {
size: 28px;
weight: blod;
}
background: {
color: grey;
}
}
}
注释
终于支持 // 单行注释了
如果多行注释的第一个字母是 !，那么注释总是会被保留到输出的CSS中
变量
$width: 5em;
变量是有作用域的。
可以使用 !global 强行变为全局变量（不推荐使用）
如果你定义了一个名为 main_width访问它。
运算
数字的加减乘除模5中运算
- x / %
颜色相关运算
FF0000 + #888888 = #FF8888
color-change fade-in fade-out 关于颜色的函数
字符串插值
image.png
如何适配所有手机（不包括PC）
所有宽度用 vw 计算，这样就能动态缩放。
使用函数将 px -> vw 的计算过程简化：
@function px($npx) {
@return $npx/375 * 100vw;
}
