Less-基础之变量学习

Posted 2020-08-28 YanEr、

一、普通变量

//--普通变量--less
@fontColor: #000000;
body{ color:@fontColor; }

//--输出--css
body{ color:#000000; }

二、选择器变量

//--选择器--less
@selector: main;
[email protected]{selector}{color:@fontColor;  }

//--输出--css
.main {color: #000000;}

三、地址Url变量

//--地址Url--less
@Website: "/Images/";
.main{background: url("@{Website}A.jpg"); }

//--输出--css
.mian{ background: url("/Images/A.jpg"); }

四、属性变量

//--属性--less
@attr: height;
.main{  @{attr}: 200px; [email protected]{attr}:20px;  }

//--输出--css
.mian{ height: 200px;line-height: 20px; }

五、变量名变量

//--变量名-less
@varName:"mainWidth";
@mainWidth:500px;
.main{ width:@@varName;}

//--输出--css
.main {width: 500px;}


//--变量名延伸1-less
@varName:"mainWidth";
@mainWidth:@width;
@width:500px;
.main{ width:@@varName;}

//--输出--css
.main {width: 500px;}


//--变量名延伸2-less
@varName:"mainWidth";
@mainWidth:@width;
@width:500px;
.main{ width:@@varName;@width:200px; }

//--输出--css
.main {width: 200px;  }

以上延伸说明，less的变量采用了懒加载方式，在文档中也有说明：

1、变量名是延迟加载的，不必在使用之前声明
2、当定义变量两次时，将使用变量的最后一个定义，从当前范围向上搜索。这类似于css本身，其中定义中的最后一个属性用于确定值。

六、默认变量

//--默认变量-less
@base-color: green;
@drak-color: darken(@base-color,10%);
.main { background-color: @drak-color; }

//--输出--css
.main { background-color: #004d00; }


//--默认变量-less
@base-color: green;
@drak-color: darken(@base-color,10%);
.main { background-color: @drak-color; @base-color: red;}

//--输出--css
.main { background-color: #cc0000; }

其实这个和上面的变量名延伸是一致的，不过是覆盖了而已。

 

 关联实操使用：

//--变量--less

 //--普通变量
@fontColor: #000000;  

 //--选择器   
@selector: main;   

//--地址Url       
@Website: "/Images/";   

 //--属性   
@attr: height;            

//--变量名
@varName: "mainWidth";
@mainWidth: @width/16rem;
@width: 500;

//--默认变量
@base-color: green;
@drak-color: darken(@base-color,10%);

[email protected]{selector} {
    width: @@varName;
    @width: 1000;
    @{attr}: 200px;
    [email protected]{attr}: 20px;
    color: @fontColor;
    font-size: 16px;
    background: url("@{Website}A.jpg");
    background-color: @drak-color;
    @base-color: red;
}

//--输出--css
.main {
  width: 62.5rem;
  height: 200px;
  line-height: 20px;
  color: #000000;
  font-size: 16px;
  background: url("/Images/A.jpg");
  background-color: #cc0000;
}