1. 嵌套規(guī)則
(1)什么是嵌套規(guī)則:嵌套規(guī)則模仿了 HTML 的結(jié)構(gòu)庞钢,讓 CSS 代碼更簡潔明了
(2)示例:
- less 文件
#header{
color:red;
.nav{
font-size:16px;
}
.logo{
width:300px;
}
}
- 編譯后的 css 文件
#header {
color: red;
}
#header .nav {
font-size: 16px;
}
#header .logo {
width: 300px;
}
2. 改變選擇器的順序
(1)說明:將&放到當(dāng)前選擇器之后坑资,就會(huì)將當(dāng)前的選擇器插入到所有的父選擇器之前
(2)示例:
- less 文件
ul{
li{
.conter &{
background:red;
width:200px;
height:200px;
}
}
}
- 編譯后 css 文件
.conter ul li {
background: red;
width: 200px;
height: 200px;
}
3. 組合使用生成所有可能的選擇器列表
- less 文件
p,a,ul,li{
border-top:2px solid red;
& &{
border-top:0;
}
}
- 編譯后 css 文件
p,a,ul,li {
border-top: 2px solid red;
}
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 {
border-top: 0;
}
4. 運(yùn)算
(1)說明:任何數(shù)值、顏色和變量都可以進(jìn)行運(yùn)算
(2)數(shù)值型運(yùn)算:less 會(huì)自動(dòng)推斷數(shù)值的單位铃拇,所以不必每個(gè)值都加上單位
(3)示例:
- less 文件
.wp{
width: 450px+450;
}
- 編譯后的 css 文件
.wp {
width: 900px;
}
5. 顏色值運(yùn)算
(1)less 在運(yùn)算時(shí)加派,先將顏色值轉(zhuǎn)換為 rgb 模式熟尉,然后在轉(zhuǎn)換為 16 進(jìn)制的顏色值并且返
回
(2)示例
- less 文件
.content{
background:#000000 + 21;
}
- 編譯后的 css 文件
.content {
background: #151515;
}
注意:既然是轉(zhuǎn)換為 rgb 模式,由于 rgb 的取值范圍是 0~255熙卡,所以計(jì)算時(shí)不能超過這個(gè)區(qū)間杖刷,超過默認(rèn)使用最大值 255 計(jì)算,同時(shí)不能使用顏色名稱(如:red驳癌、green等)進(jìn)行計(jì)算