scss使用指南--每天一点

我们平时都称之为 Sass，其实可分成sass和scss， 其中Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，以“.sass”后缀为扩展名；而 SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的语法书写和我们的 CSS 语法书写方式非常类似，较为宽松，以“.scss”后缀为扩展名；二者可以说是一个东西

sass嵌套

1. 选择器嵌套

   1.   <header> 　　<nav>
              <a href="#">home</a>
              <a href="#">page</a>
          </nav>
      </header>
      
          nav a {
              color:red;
          }
          header nav a {
              color:green;
          }
      nav {
        a {
          color: red;
          
          header & {
            color:green;
          }
        }  
      }

      属性嵌套(有相同的属性前缀)

       

      如 font, background等，也有可能是 -webkit-

      .box {
           font-size: 12px;
           font-weight: bold;
      }
      .box {
        font: {
         size: 12px;
         weight: bold;
        }  
      }

       

来源：https://www.cnblogs.com/wuliujun521/p/11359126.html