css预处理器

• Sass https://www.sass.hk/
• LESS
• Stylus

Sass

嵌套

• 嵌套规则
  • 允许将一套css样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，嵌套功能避免了重复输入父选择器，而且令复杂的css结构更易于管理
• 在嵌套css规则时，有时也需要直接使用嵌套外层的父选择器，可以使用&代表嵌套规则外层的父选择器（编译后的css文件中&将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递）
• 选择器嵌套+属性嵌套
  • 属性嵌套
    • 有些css属性遵循相同的命名空间，为了便于管理，避免重复输入，Sass允许降属性嵌套在命名空间中
• 缺陷：层级嵌套可能造成代码的冗杂

占位符选择器%

• Sass额外提供了一种特殊类型的选择器：占位符选择器，必须通过@extend指令调用（单独使用将不会被编译到css文件中）

注释

• 多行注释会被完整输出到编译后的css文件中（/* */）
• 单行注释则不会(//)

变量

• 变量以美元符号开头，赋值方法与css属性写法一致
• 支持块级作用域（只能在嵌套规则内使用（局部变量））
• 可在块级作用域声明时，于其后添加！global（将其提升为全局作用域）

数组Lists

• 通过空格或则逗号分隔的一系列的值（独立的值）都被视为数组
• nth可以直接访问数组中的某一项-》nth（$arr,1）(index从1开始)
• join将多个数组连接在一起
• append在数组中添加新值
• @each遍历数组中的每一项

maps

• 可视为键值对的集合（对象）

运算

• 除法运算（/）
  • 在css中 / 通常起到分隔数字的用途
    • 这三种情况可视为除法运算符
      1. 值，或值的一部分，是变量或则函数的返回值
      2. 值被圆括号包裹
      3. 值是算数表达式的一部分
  • 需要使用变量，又确保 / 不做除法运算而是被编译到css文件中，只需要#{}插值语句将变量包裹
• 字符串运算
  • 字符串连接左侧为尊
  • 在有引号的文本字符串中使用#{}插值语句可以添加动态的值

@extend

• 一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式
• 使用@extend将其后选择器的样式继承给使用该指令的选择器
• @extend-only 使用占位符 % （当占位符被单独使用时不会被编译到css文件中）

@at-root

• 跳出当前选择器，使其成为当前选择器的兄弟元素
• @at-root（without：...）and @at-root（with：...）
  • @at-root（without： media）：：可跳出@media（默认跳不出@media层级）

@debug

• 相当于 js里的console.log 输出变量的值

@if

• 当@if的表达式返回值不是false或则null时，条件成立，输出{}内的代码

重点

• 变量 Variables
• 嵌套 Nesting
• 混合 Mixins
• 继承 Selector Inheritance