scss使用

本地搭建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;
 }

如何做到响应式