Less學習教程四

本文為

parent selector部分的翻譯。

用&來引用父選擇器（譯註：大多數情況，&表示將所有的祖先選擇器替換在它的位置）

&操作符最常用在巢狀規則中，表示乙個應用修改類或偽類的既有選擇器的父選擇器，例如

a 
}

結果是：

a

a:hover

請注意如果沒有使用&，則上面的示例將產生a :hover規則（與標記內懸停元素匹配的後代選擇器），而這並不是我們通常想要使用的緊跟在a後面的:hover。

「父選擇器」運算子有多種用途。基本上，用於嵌入選擇器的組合會比預設的情況要多見。。例如，&的另一種典型用法是產生重複的類名：

.button 
&-cancel 
&-custom 
}

輸出：

.button-ok .button-cancel

.button-custom

&在選擇器中可能會出現多次，用於重複引用父選擇器而無需重複其名稱。

.link 
&& && 
&, &
ish 
}

輸出為：

.link + .link .link .link .link .link

.link, .linkish

請注意，&代表所有父選擇器（而不僅僅是最接近的祖先），因此下例：

.grand 
&&     &
&     &, &
ish 
}}

結果是：

.grand .parent > .grand .parent .grand .parent .grand .parent .grand .parent .grand .parent .grand .parent, .grand

.parentish

將選擇器放在繼承的（父）選擇器之前可能很有用。這可以通過將&放在在當前選擇器之後來完成。例如，在使用modernizr時，您可能要根據支援的功能指定不同的規則：

.header 
}}

選擇器.no-borderradius &將.no-borderradius在其父項.header .menu之前得到.no-borderradius .header .menu輸出：

.header .menu .no-borderradius .header

.menu

&也可以用於生成逗號分隔列表中選擇器所有的可能排列組合：

p, a, ul, li 
}

這將擴充套件為指定元素的所有可能（16種）組合：

p, a,ul, li p + p, p + a, p + ul, p + li, a + p, a + a, a + ul, a + li, ul + p, ul + a, ul + ul, ul + li, li + p, li + a, li + ul,

li + li

gulp學習之四編譯 LESS

npm install gulp less 獲取 gulp var gulp require gulp 獲取 gulp less 模組 var less require gulp less 編譯less 在命令列輸入 gulp less 啟動此任務 gulp.task less function 在...

less基礎教程

說明 less是css的公升級版。主要從程式設計角度來書寫css。其中包括眾所周知的變數，運算，命名空間等案例變數 width 300px bgcolor red divdiv 混合不帶引數定義變數 width 300px bgcolor red div 定義混合 border radiusd...

less基礎教程

less基礎教程寫原生css，會讓頁面結構越來越混亂，幾乎看不出層次結構。less推薦寫巢狀結構需要通過進行預編譯，讓巢狀的css轉換成能讓瀏覽器能夠識別的樣式，而沒有誤差。引入less 其實還有其它預處理器，不過功能都差不多sass和stylus等前站文件欄就有官網如果直接引入乙個les...

Less學習教程四

gulp學習之四 編譯 LESS

less基礎教程

less基礎教程

相關推薦

gulp學習之四編譯 LESS