1、引用父选择器:&
如果是一个深层嵌套的规则,在 & 替换前将完全解析父选择器。例如:
& 必须出现在符合选择器的开头,但后面可以跟一个后缀,该后缀将添加到父选择器后。例如:
如果父选择器不能应用后缀,则会抛出错误。
2、属性嵌套
css 在 “命名空间” 中有很多属性,例如 font-size、font-weight、font-famliy 都在 font 命名空间。在 css 中,如果要编写同一个命名空间的一组属性,则每次都需要重复输入命名空间。现在 sass 允许将命名空间提取作为“父选择器” ,只编写一次,子属性嵌套在 “父选择器” 下。例如:
注意: 命名空间 font 后紧跟着冒号 ‘:’。
命名空间本身也可以具有值。例如:
3、占位符选择器
占位符选择器是一种特殊的选择器,它与 @extend 一起使用,单独出现时不会渲染成 css。例如:
占位符 equal-heights 未被渲染为 css。
4、注释
sass 支持标准的多行注释 /* 此处是注释 */ 和 单行注释 // 此处是注释。sass 编译成 css 之后多行注释会被保留,单行注释会被删除。
当多行注释的首字母是 ! 时,即便是在压缩模式下编译 scss 文件,多行注释也会被保留,通常在文件头部声明版本信息时使用。例如:
扩展: sass 在压缩模式下编译成 css 的命令
多行注释中可以插入变量,书写格式为 #{$ 变量名}。例如:
注意: 在多行注释中使用汉字,且同时包含变量时,在编译时会报错。
领取专属 10元无门槛券
私享最新 技术干货