语法扩展 ​

注释扩展 ​

• 单行注释: //，不会被编译到 css 文件中
• 多行注释: /* */，会被编译到 css 文件中(compressed 模式下会被删除)
• 压缩保留: /*! */，保证在 compressed 模式保留该注释，一般用于版权声明
• 插值语句: #{content} 也可以写入注释中，这里 content 为变量

示例:

// 这里声明一个变量 $author , 这里的注释不会保留
$author: neko
/*!
 * author: #{$author}
 */

编译后:

/*!
 * author: neko
 */

嵌套规则 ​

基本嵌套 ​

sass 允许将一套 css 样式嵌入另一套样式中，外层选择器将作为内层样式的父选择器

示例:

.article
    width: 80%
    margin: 0 auto

    .title
        font-size: 24px

编译后:

.article {
  width: 80%;
  margin: 0 auto;
}

.article .title {
  font-size: 24px;
}

父选择器 ​

内存样式中，可能需要直接使用父元素选择器，可以使用 & 标识符

• & 标识符指向父元素选择器，当无父级选择器时， & 值为 null
• & 可以作为第一个字符与后缀生成复合选择器

示例:

.confirm
    border: 1px solid grey
    &:hover
        border: none
    &-icon
        background: none

编译后:

.confirm {
  border: 1px solid grey;
}

.confirm:hover {
  border: none;
}

.confirm-icon {
  background: none;
}

属性嵌套 ​

对于遵循相同命名空间的 css 属性，如: font、padding、margin 等，可以使用属性嵌套简写

• css 命名空间作为嵌套的父级(注意: 需要添加冒号否则会被当做选择器处理)
• 命名空间可以包含自己的属性值
• 嵌套样式使用后缀作为属性名

示例:

.rect
    background: no-repeat
        color: none
        image: none

.rect {
  background: no-repeat;
  background-color: none;
  background-image: none;
}