sass語法嵌套規則與註釋講解

語法嵌套規則

選擇器嵌套

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

.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;
    }
}

最終生成的格式：

避免了重覆輸入父選擇器，複雜的 CSS 結構更易於管理

父選擇器&

​ 在嵌套 CSS 規則時，有時也需要直接使用嵌套外層的父選擇器，例如，當給某個元素設定 hover 樣式時，或者當 body 元素有某個 classname 時，可以用 & 代表嵌套規則外層的父選擇器。

​ 例如有這麼一段樣式：

.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 作為屬性的命名空間。為了便於管理這樣的屬性，同時也為了避免了重覆輸入，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：後面要加一個空格

sass註釋

Sass支持兩種註釋

• 標準的css多行註釋 /* ... */ 會編譯到.css文件中
• 單行註釋 // 不會編譯到.css文件

例如：

$version : "1.0.0";
/* 
    首頁相關css
    version：#{$version}
 */
.container{
    width: 1200px;
    .swiper{
        // 網站幻燈片相關css
        width: 100%;
        height: 260px;
        .dot{
            /* 
                幻燈片指示點
                預設白色
                選中時藍色
            */
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #FFF;
            &.active{
                background-color: blue;
            }
        }
    }
}

編譯後：

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

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

.container .swiper .dot { /*  幻燈片指示點 預設白色 選中時藍色 */ width: 10px; height: 10px; border-radius: 50%; background-color: #FFF; }

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