Sass 嵌套



  • 嵌套规则

    Sass 允许您以与 HTML 相同的方式嵌套 CSS 选择器。
    查看一些用于网站导航的 Sass 代码示例:
    nav {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      li {
        display: inline-block;
      }
      a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }
    }
    
    
    注意,在 Sass 中,ul,li 和 a 选择器嵌套在 nav 选择器中。
    CSS 中,规则是一一定义的(不嵌套):
    nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    nav li {
      display: inline-block;
    }
    nav a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }
    
    
    因为您可以在 Sass 中嵌套属性,所以它比标准 CSS 更干净,更易于阅读。
  • Sass 嵌套属性

    许多 CSS 属性具有相同的前缀,例如 font-familyfont-sizefont-weighttext-aligntext-transformtext-overflow
    使用 Sass,您可以将它们写为嵌套属性:
    看下面的例子:
    font: {
      family: Helvetica, sans-serif;
      size: 18px;
      weight: bold;
    }
    
    text: {
      align: center;
      transform: lowercase;
      overflow: hidden;
    }
    
    
    Sass 编译后会将以上内容转换为普通 CSS:
    font-family: Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    
    text-align: center;
    text-transform: lowercase;
    text-overflow: hidden;