學會如何使用LESS(二)----巢狀規則、運算、名稱空間和作用域
阿新 • • 發佈:2019-01-22
巢狀
一、巢狀規則
header{
h1{
font-size: 18px;
color: green;
}
.box1{
width: 300px; height: 200px;
background: red;
}
}
編譯後的css:
header h1 {
font-size: 18px;
color: green;
}
header .box1 {
width: 300px;
height: 200px;
background: red;
}
二、父元素選擇器(&)
表示當前選擇器所有父選擇器
footer{
h1{
font-size: 20px;
color: orange;
}
.box2{
width: 500px; height: 100px;
background: green;
&:hover{
background: blue;
}
}
}
編譯後的css:
footer h1 {
font-size: 20px;
color: orange;
}
footer .box2 {
width: 500px;
height: 100px;
background: green;
}
footer .box2:hover {
background: blue;
}
三、改變選擇器的順序
將&放到當前選擇器之後,就會將當前選擇器插入到時所有父元素之前。
.father{
.son{
.grand &{
color: red;
}
}
}
編譯後的css:
.grand .father .son {
color: red;
}
四、組合生成所有可能的選擇器列表
p ,a,ul,li,span{
border: 1px solid red;
& &{
border-top: 0;
}
}
編譯後的css:
p,
a,
ul,
li,
span {
border: 1px solid red;
}
p p,
p a,
p ul,
p li,
p span,
a p,
a a,
a ul,
a li,
a span,
ul p,
ul a,
ul ul,
ul li,
ul span,
li p,
li a,
li ul,
li li,
li span,
span p,
span a,
span ul,
span li,
span span {
border-top: 0;
}
運算
任何數值、顏色和變數都可以進行運算;
一、數值型運算
less會為你自動推算數值和單位,所以我們不用每個值都加上單位,注意,運算子與值之間必須以空格空開,涉及優先及時以()進行優先順序運算;
.div{
width: 450 + 450px;
height: 2 * 30px;
}
.div2{
width: ( 300px + 200 ) * 2;
}
編譯後的css:
.div {
width: 900px;
height: 60px;
}
.div2 {
width: 1000px;
}
二、顏色值運算
less在運算時,先將顏色值轉換為rgb模式,然後再轉換為16進位制的顏色值並返回,rgb模式他的值是 0~255,當你的值超過255則預設使用最大值255進行計算,不能直接使用顏色名稱進行運算。
.content{
width: 300px; height: 200px;
background: #000000 + 21;
}
編譯後的css:
.content {
width: 300px;
height: 200px;
background: #151515;
}
名稱空間
有時候,你可能為了更好組織 CSS 或者單純是為了更好的封裝,將一些變數或者混合模組打包起來,一些屬性集之後可以重複使用。
#bgcolor(){
background: #ffffff;
.a{
color: #8888888;
&:hover{
color: #ff6600;
}
.b{
background: #333;
}
}
}
.bgcolor1{
background: #fdfee0;
#bgcolor>.a;
}
.bgcolor2{
#bgcolor>.a>.b;
}
//省略>的寫法(將>改成空格即可)
編譯後的css:
.bgcolor1 {
background: #fdfee0;
color: #8888888;
}
.bgcolor1:hover {
color: #ff6600;
}
.bgcolor1 .b {
background: #333;
}
.bgcolor2 {
background: #333;
}
作用域
Less中的作用域與程式語言中的作用域概念非常相似。首先會在區域性查詢變數和混合,如果沒找到,編譯器就會在父作用域中查詢,依次類推。
@color: orange;
.bgcolor{
width: 50px;
a{
@color: #333;
color: @color;
}
@color: red;
}
編譯後的css:
.bgcolor {
width: 50px;
}
.bgcolor a {
color: #333333;
}