Less-css基础之变量学习

一、普通变量

//--普通变量--less

@fontColor: #000000;

body{ color:@fontColor; }

//--输出--css

body{ color:#000000; }

二、选择器变量

//--选择器--less

@selector: main;

.@{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; line-@{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%);

.@{selector} {

    width: @@varName;

    @width:;

    @{attr}: 200px;

    line-@{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;

}

作者：leona

原文链接：http://www.cnblogs.com/leona-d/p/6296162.html

秒客网

Less-css基础之变量学习

相关文章