SCSS知识点

SCSS介绍 scss一个css预编译器 也就是用给定的语法写代码 利用加载器 最终转换成css代码 在项目中引入scss 和scss-loader(scss加载器将scss代码转换成css代码) n

SCSS变量定义 SCSS使用$符号来定义变量 示例： SCSS代码 $font-stack:Helvetica,sans-erif; $primary-color:#333; body{ font:

SCSS选择器嵌套 scss选择器可以像html结构那样嵌套 示例： scss代码 nav{ ul{ margin:0; padding:0; list-style:none; } li{ displ

SCSS模块化 随着项目的规模越来越大，单个scss文件中的代码就会越来越多 这时候我们就可以使用scss模块化将单个scss文件中的代码进行拆分 最终引入到一个scss文件中 方便维护 实现方式 @

mixin(混入) 相当于创建了一个可接收参数的代码块 引入后代码块中的内容会自动放到引入位置 scss代码 css代码

SCSS扩展与继承 扩展就相当于定义了一个代码块 可以使用继承引入 特性：如果有多个选择器使用了同一个的扩展 会将这些选择器用并级选择器选中 scss代码 css代码

SCSS中的运算符 例如：+、-、*、math.div()或/和%。分别是加，减，乘，除，取余 ()提高优先级 scss代码 css代码

SCSS中的&(选择器) &相当于当前选择器 例如： scss代码 css代码 &选择器的具体用法。

SCSS中的插值语法 使用#{}将变量插入选择器、属性名 或 字符串中。 scss代码 css代码。

SCSS控制指令 @if/@else if/@else 条件判断 scss代码 css代码 @for循环 注意范围 只能写数字 scss代码 css代码 @each 遍历列表或映射 scss代码 cs

SCSS中的数据类型 数字（带或不带单位） 字符串(有引号或没引号) 颜色(十六进制、rgb、hsl等) 布尔值(true/false) 空值(null) 列表(用空格或逗号分隔，如10px 20px

SCSS三元函数 语法 scss代码 $condition：布尔表达式 $if-true：条件为真时返回的值 $if-false：条件为假时返回的值 示例： scss代码 css代码

SCSS自定义函数 在 SCSS 中， @function 允许你自定义函数，用来封装一段计算逻辑并返回一个具体的值（如颜色、数字、字符串等）。这可以让你将常用的计算过程抽象出来，使样式代码更简洁、更