SCSS语法

Posted 2023-04-23

参考技术A 特殊的 / 除法运算符

scss为了兼容IE8,10px/8px不能种的 / 不能编译为除法运算符，可以在除法运算前使用 + 运算符创建命名空间

插值内的计算，null为空字符串

import 可以导入style.scss的样式到当前文件下

import 指令支持嵌套

extend 只能继承选择器

extend继承选择器的相关性

extend的多次继承

extend的链式继承

mixin 混合属性

mixin 在外层混合, 不依赖于父层结构

mixin 设置参数

mixin 混合未知格式和数量的变量, 使用 arg...

也可以使用插值编写，不过mixin和include指定的是一个不会进行动态识别的字面量不能使用插值

mixin 的复合 mixin内部也可以include

scss CSS Grid Basic语法

.container {
  display: grid;
  grid-template-columns: 2fr 6fr 2fr;
  grid-template-rows: 1fr;
  display: -ms-grid;
  -ms-grid-columns: 2fr 6fr 2fr;
  -ms-grid-rows: 1fr;
  .item1 {
    grid-row: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .item2 {
    grid-row: 1;
    grid-column: 2;
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
  .item3 {
    grid-row: 1;
    grid-column: 3;
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
}