Less學習筆記9:避免編譯
阿新 • • 發佈:2018-12-07
避免編譯
有時候需要輸出一些不正確的CSS愈發或者使用一些LESS不認識的專有語法。
要在輸出這樣的值,我們可以在字串前加上一個~
例如:width:~'calc(100%-35)'
有這樣一個樣式:
//避免編譯
.test_03{
width: 300px;
}
假設有一個寬度的計算:
.test_03{
width: calc(300px - 30px);
}
通過編譯後的test_03為:
.test_03{
width: calc(270px);
}
但是這個讓瀏覽器去計算,而是不LESS本身去計算,
此時應該加上~單引號或者雙引號,
.test_03{
width: ~'calc(300px - 30px)';
}
此時通過編譯生成的CSS為:
.test_03{
width: calc(300px - 30px);
}
!importamt關鍵字(優先順序最高)
!importamt關鍵字會為所有混合所帶來的樣式,新增上!importamt
<div class='box'></div>
.box{
width:300px;
height: 300px;
}
使用:
.test_03{
.box!importamt;
}
編譯後的CSS
.test_03{
width:300px !important;
height: 300px !important;
}
會為所有的樣式加上!important;
更多的資料:
Less 中文網:http://lesscss.cn/;