Sass：＆定義嵌套類時

Question

我正在學習Sass。我正在通過嵌套類部分。它有以下片段。

nav { 
    ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    } 

    li { display: inline-block; } 

    a { 
    display: block; 
    padding: 6px 12px; 
    text-decoration: none; 
    } 
} 

在我的項目中使用Sass。嵌套的類是在&運算符的幫助下編寫的。例如。同樣的代碼片段寫成：

nav { 
    & ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    } 

    & li { display: inline-block; } 

    & a { 
    display: block; 
    padding: 6px 12px; 
    text-decoration: none; 
    } 
} 

兩個片段生成相同的CSS爲：

nav ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
nav li { 
    display: inline-block; 
} 
nav a { 
    display: block; 
    padding: 6px 12px; 
    text-decoration: none; 
} 

我想知道的是這是什麼&運營商在這裏做什麼？它可以被省略嗎？

Answer 1

兩個片段生成相同的CSS，因爲你需要有&後的空間，但如果你刪除的空間，你應該得到

navul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
navli { 
    display: inline-block; 
} 
nava { 
    display: block; 
    padding: 6px 12px; 
    text-decoration: none; 
} 

但在這種情況下，它是沒有意義的，所以我們使用它的時候你有&這樣經過類：

nav { 
    &.class1 { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    } 

    &.class2 { display: inline-block; } 

    &.class3 { 
    display: block; 
    padding: 6px 12px; 
    text-decoration: none; 
    } 
} 

您將獲得：

nav.class1 { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    } 

nav.class2 { display: inline-block; } 

nav.class3 { 
    display: block; 
    padding: 6px 12px; 
    text-decoration: none; 
    } 

Answer 2

深入研究文檔後，我發現&here的解釋。所以基本上&是一個父母選擇器。來自doc：

有時在其他 方式中使用嵌套規則的父選擇器比缺省值更有用。例如，您可能希望在選擇器懸停時或 元素具有特定類時使用特殊的 樣式。在這些情況下，您可以明確指定使用& 字符插入父選擇器的位置。例如：

SCSS：

a { 
    font-weight: bold; 
    text-decoration: none; 
    &:hover { text-decoration: underline; } 
    body.firefox & { font-weight: normal; } 
} 

CSS：

a { 
    font-weight: bold; 
    text-decoration: none; 
} 

a:hover { 
    text-decoration: underline; 
} 

body.firefox a { 
    font-weight: normal; 
}