2.嵌套Nesting

嵌套Nesting

在CSS 中常常會有重複出現的樣式名稱，如下，一直重複使用nav

.nav{
    height:100px;
    }
.nav ul{
    margin:0;
    }
.nav ul li{
    float:left;
    list-style:none;
    padding:5px;
    }

SASS提供一種更簡單的方式來寫重複使用的選擇器，將 ul 和 li 裡面的設定放進nav裡面。如下:

.nav{
  height:100px;
    ul{
      margin:0;
      li{
       float:left;
       list-style:none;
       padding:5px;
    }
  }
}

嵌套調用父選擇器

使用 & 符號來表示直接調用父選擇器

.nav{
    height:100px;
    ul{
        margin:0;
        li{
            float:left;
            list-style:none;
            padding:5px;
        }
        a{
            display: block;
            color: #000;
            padding:5px;
            &:hover{
                background-color: #0d2f7e;
                color:#fff;
            }
        }
    }
    & &-text{
        font-size: 18px;
    }
}

嵌套屬性

常常會有重複的屬性如下圖

SASS的重複屬性寫法

body{
    font:{
        family:helvetica, Arial, sans-serif;
        size:15px;
        weight:normal;
    }
}

.nav{
    border:1px solid #000{
        left: 0;
        right: 0;
    }    
}

輸出成CSS結果