less語法的技巧總結,很基礎,熟練掌握后能提高我們在大型項目中的開發(fā)效率
@a:0.5;
@showdaw-px:100;
@mkcolor1:#6ec5ff;
@num:1;
.outer{
//拼接的字符串在變量后面,需要在冒號后面加~
@width:~"@{showdaw-px}px";
//拼接的字符串在冒號后面,使用的時候是@@var
@bgColor:"mkcolor@{num}";
//乘法運算先定義好運算接口的變量,再引用
@alpha:@a * 100;
opacity: @a;
filter: alpha(opacity=@alpha);
height: 300px;
background: @@bgColor;
width: @width;
}
//無參數(shù),省略括號,編譯的時候會顯示這個類
// .pub{
// width: 100px;
// height: 100px;
// background: green;
// }
//有參數(shù),是函數(shù),不會編譯這個函數(shù)
.pub(@bg:green){
width: 100px;
height: 100px;
background: @bg;
}
.outer{
.pub(red);
// .pub;
// background: red;
}
//@arguments 所有參數(shù)
.transition(@property:all,@duration,@timing:linear,@delay:0s){
transition: @arguments;
}
.sum(@n,@m){
@result:@n + @m;
}
.box{
.sum(10,20);
width:unit(@result,px);
/* unit是less提供的方法,
unit([value],'px)是給value值設置單位,
但是如果之前有單位,此處會把原來的單位去掉
*/
}
/* 繼承
less中的繼承不是copy代碼,
而是讓繼承與被繼承公用一套css代碼
*/
.pub2{
width: 100px;height: 100px;
background-color: red;
}
/* .div:extend(.pub2){
background-color: green;
} */
.div{
&:extend(.pub2);
background-color: green;
}
.com{
padding: 10px;
margin: 10px;
}
/* 繼承多個樣式類 */
.box2{
&:extend(.pub2,.com);
}
.box3{
.mark{
width: 100px;
height: 100px;
}
.inner{
// &:extend(.mark); //這樣不能繼承.mark
&:extend(.box3 .mark);
background:red;
}
}
遞歸
.columns(@i) when(@i <= 4){
// width: unit(@i,'px');
.box@{i}{
width: unit(@i*10,px);
margin-bottom: unit(@i*2,px);
background:red;
&:hover{
background: green;
}
}
.columns(@i+1)
}
.columns(1);
less連接符與import
@import (reference) './test.less';
//只導入這個css文件,不編譯里面的css內容
.box{
.mark{
}
&.pp{
background-color: red;
height: 100px;
}
& > .mm{
background: green;
}
.box222{
.bgColor;
}
}
文章來源:http://www.zghlxwxcb.cn/news/detail-565960.html
關注我的個人公眾號,獲取更多前后端開發(fā)經(jīng)驗知識文章來源地址http://www.zghlxwxcb.cn/news/detail-565960.html
到了這里,關于less預處理語言的運用之-變量拼接那點事的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網(wǎng)!