CSS樣式規則聲明

Question

我不記得我在哪裏看到它或它聲稱是哪種語言變體，但我看到一個樣式規則在另一個聲明中有聲明。這是像下面的東西。

nav ul { 
    list-style-type: none; 
    li { 
     color: #fff; 
    } 
} 

我敢肯定，它看起來類似的東西，如果我猜中這將是相同的：

nav ul { 
    list-style-type: none; 
} 
nav ul > li { 
    color: #fff; 
} 

誰能告訴我這是什麼CSS的變化，所以我可以瞭解更多，因爲它似乎更簡單。

Answer 1

這是大多數CSS預處理器現在..它叫做nested rules。

lesscss.org

SASS css

從lesscss網站的例子：

少給你使用嵌套來代替，或者與級聯組合的能力。比方說，我們有以下的CSS：

#header { 
    color: black; 
} 
#header .navigation { 
    font-size: 12px; 
} 
#header .logo { 
    width: 300px; 
} 

在更短的，我們也可以把它寫這種方式：

#header { 
    color: black; 
    .navigation { 
    font-size: 12px; 
    } 
    .logo { 
    width: 300px; 
    } 
}