語法嵌套規(guī)則

選擇器嵌套

例如有這么一段css，正常CSS的寫法

創(chuàng)新互聯(lián)公司成都網(wǎng)站建設(shè)按需定制，是成都網(wǎng)站建設(shè)公司,為玻璃鋼坐凳提供網(wǎng)站建設(shè)服務(wù),有成熟的網(wǎng)站定制合作流程，提供網(wǎng)站定制設(shè)計(jì)服務(wù)：原型圖制作、網(wǎng)站創(chuàng)意設(shè)計(jì)、前端HTML5制作、后臺(tái)程序開發(fā)等。成都網(wǎng)站推廣熱線：028-86922220

.container{width:1200px; margin: 0 auto;}
.container .header{height: 90px; line-height: 90px;}
.container .header .log{width:100px; height:60px;}
.container .center{height: 600px; background-color: #F00;}
.container .footer{font-size: 16px;text-align: center;} 

改成寫SASS的方法

.container{
  width: 1200px;
  margin: 0 auto;
  .header{
    height: 90px; line-height: 90px;
    .log{
      width:100px; height:60px;
    }
  }
  .center{
    height: 600px; background-color: #F00;
  }
  .footer{
    font-size: 16px;text-align: center;
  }
}

最終生成的格式：

避免了重復(fù)輸入父選擇器，復(fù)雜的 CSS 結(jié)構(gòu)更易于管理

父選擇器&

? 在嵌套 CSS 規(guī)則時(shí)，有時(shí)也需要直接使用嵌套外層的父選擇器，例如，當(dāng)給某個(gè)元素設(shè)定 hover 樣式時(shí)，或者當(dāng) body 元素有某個(gè) classname 時(shí)，可以用 & 代表嵌套規(guī)則外層的父選擇器。

? 例如有這么一段樣式：

.container{width: 1200px;margin: 0 auto;}
.container a{color: #333;}
.container a:hover{text-decoration: underline;color: #F00;}
.container .top{border:1px #f2f2f2 solid;}
.container .top-left{float: left; width: 200px;} 

? 用sass編寫

.container{
  width: 1200px;
  margin: 0 auto;
  a{
    color: #333;
    &:hover{
      text-decoration: underline;color: #F00;
    }
  }
  .top{
    border:1px #f2f2f2 solid; 
    &-left{
      float: left; width: 200px;
    }
  }
}

屬性嵌套

? 有些 CSS 屬性遵循相同的命名空間 (namespace)，比如 font-family, font-size, font-weight 都以 font 作為屬性的命名空間。為了便于管理這樣的屬性，同時(shí)也為了避免了重復(fù)輸入，Sass 允許將屬性嵌套在命名空間中

? 例如：

.container a{color: #333;font-size: 14px;font-family:sans-serif;font-weight: bold;}

? 用SASS的方式寫

.container{
  a{
    color: #333;
    font: {
      size: 14px;
      family:sans-serif;
      weight:bold;
    }
  }
}

注意font：后面要加一個(gè)空格

sass注釋

Sass支持兩種注釋

• 標(biāo)準(zhǔn)的css多行注釋 /* ... */ 會(huì)編譯到.css文件中
• 單行注釋 // 不會(huì)編譯到.css文件

例如：

$version : "1.0.0";
/* 
  首頁相關(guān)css
  version：#{$version}
*/
.container{
  width: 1200px;
  .swiper{
    // 網(wǎng)站幻燈片相關(guān)css
    width: 100%;
    height: 260px;
    .dot{
      /* 
        幻燈片指示點(diǎn)
        默認(rèn)白色
        選中時(shí)藍(lán)色
      */
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #FFF;
      &.active{
        background-color: blue;
      }
    }
  }
}

編譯后：

@charset "UTF-8";
/* 首頁相關(guān)css version：1.0.0 */
.container { width: 1200px; }

.container .swiper { width: 100%; height: 260px; }

.container .swiper .dot { /* 幻燈片指示點(diǎn) 默認(rèn)白色 選中時(shí)藍(lán)色 */ width: 10px; height: 10px; border-radius: 50%; background-color: #FFF; }

.container .swiper .dot.active { background-color: blue; }
/*# sourceMappingURL=index.css.map */