一、十分鐘學(xué)會(huì)Less
概覽
less (Leaner Style Sheets的縮寫) 是一門向后兼容的CSS擴(kuò)展語言许起。這里呈現(xiàn)的是Less的官方文檔（中文版）锦针，包含了Less語言以及利用Javascript開發(fā)的用于將Less樣式轉(zhuǎn)換成CSS樣式的Less.js工具赫舒。
在Node.js環(huán)境中使用Less：
npm install -g less
//驗(yàn)證安裝成功
lessc -version //lessc 3.12.2 (Less Compiler) [JavaScript]
將less編譯成css文件
//也可使用vscode自帶插件
lessc style.less style.css
關(guān)于用法
1脚曾、定義變量
//定義變量
@main-color: cyan;
.bgColor {
background: @main-color;
}
2、嵌入樣式
//嵌入樣式
.border {
border: 1px solid #ccc;
}
.box {
.border;
background: skyblue;
}
3、定義函數(shù) mianButton(@bgcolor) 傳遞參數(shù) pink
//定義函數(shù)
//參數(shù)傳遞
.mainButton(@bgcolor) {
background: @bgcolor;
}
//默認(rèn)參數(shù)
.border-top(@color: red) {
border-top: 10px solid @color;
}
.redButton {
.mainButton(pink);
.border-top();
text-align : center;
line-height: 100px;
}
4金度、@_ 匹配模式封裝三角形樣式
//向上三角
.triangle(top, @w: 0.3125rem, @c: #ccc) {
border-width: @w;
border-color: transparent transparent @c transparent;
border-style: dashed dashed solid dashed;
}
//向下三角
.triangle(bottom, @w: 0.3125rem, @c: #ccc) {
border-width: @w;
border-color: @c transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
// 向左三角
.triangle(left, @w: 0.3125rem, @c: #ccc) {
border-width: @w;
border-color: transparent @c transparent transparent;
border-style: dashed solid dashed dashed;
}
// 向右三角
.triangle(right, @w: 0.3125rem, @c: #ccc) {
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: dashed dashed dashed solid;
}
//@_是固定格式应媚，表示不管你匹配到誰，都會(huì)帶上這些內(nèi)容
.triangle(@_, @w: 0.3125rem, @c: #ccc) {
width: 0;
height: 0;
overflow: hidden;
}
// 用法
.triangle(right,@w:1.6vw,@c:#fff);
5猜极、運(yùn)算
//運(yùn)算
@small-width:10px;
.small{
width:2*@small-width;
}
6珍特、嵌套規(guī)則
//嵌套規(guī)則
.list{
width:10rem;
li{
height:1.5rem;
}
p{
color:cyan;
&:hover{
//&代表上一層選擇器，這里指代p標(biāo)簽
color:skyblue;
}
}
}
7魔吐、arguments 自動(dòng)填充所有變量
//arguments的好處就是可以自動(dòng)幫你填充所有變量
.border(@width:1px,@color:cyan,@style:solid){
border:@arguments
}
//調(diào)用樣式
.box{
.border(2px);
}
//渲染結(jié)果
.box{
border:2px cyan solid;
}
二、Less注意事項(xiàng)
1）注釋問題
/*編譯后會(huì)被保留*/
//編譯后不會(huì)被保留
2）less同樣適用 !important
//border所有樣式都會(huì)帶上 !important
.box{
.border(2px) !important;
}
3）避免編譯符號(hào) ~
在字符串前加上一個(gè)~即可用一些less不認(rèn)識(shí)的專有語法或者一些不正確的css語言莱找。
// 這里顯然不是要用less去計(jì)算
.height{
height:calc(300px - 30px);
}
// 加上避免編譯符號(hào)
.height{
height: ~'calc(300px - 30px)';
}
關(guān)于less的一些基礎(chǔ)用法就總結(jié)到這里了酬姆，喜歡記得點(diǎn)個(gè)關(guān)注。
