> For the complete documentation index, see [llms.txt](https://jimjim.gitbook.io/sass/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jimjim.gitbook.io/sass/sassji-chu/2qiantao-nesting.md).

# 2.嵌套Nesting

## 嵌套Nesting

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

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

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

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

![](https://2396662457-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlX7mJ4cxCl8pMfjLFQ%2F-LlX7o7G0jAxtu25nekE%2F-LlX7q5-1z8jxruzdhk0%2Fsass7.jpg?generation=1565014592125769\&alt=media)

## 嵌套調用父選擇器

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

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

![](https://2396662457-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlX7mJ4cxCl8pMfjLFQ%2F-LlX7o7G0jAxtu25nekE%2F-LlX7q51xUGc_rL6nbjy%2Fsass12.jpg?generation=1565014592234588\&alt=media)

## 嵌套屬性

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

![](https://2396662457-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlX7mJ4cxCl8pMfjLFQ%2F-LlX7o7G0jAxtu25nekE%2F-LlX7q53F1pDzPAkEgDT%2Fsass13.jpg?generation=1565014592368223\&alt=media)

SASS的重複屬性寫法

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

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

輸出成CSS結果![](https://2396662457-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlX7mJ4cxCl8pMfjLFQ%2F-LlX7o7G0jAxtu25nekE%2F-LlX7q55a8Ku_9r36Ybj%2Fsass14.jpg?generation=1565014593311881\&alt=media)