Less的简单使⽤（⼀）——变量的⽤法
Less的简单使⽤（⼀）——变量的⽤法
Less是css的扩展，Less不仅与CSS向后兼容，⽽且它添加的其他功能都使⽤现有的CSS语法。变量
⼀、变量正常⽤法（variables）
在⼀个位置控制常⽤值
.less⽂件中
/**/ Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);
// Usage
a,
.
link {
color: @link-color;
}
a:hover {
color: @link-color-hover;
}
.widget {
color: #fff;
background: @link-color;
}**
.css⽂件中对应的css代码：
a,
.link {
color: #428bca;
}
.widget {
color: #fff;
background: #428bca;
}
⼆、变量作为选择器名称使⽤
语法：变量声明：@变量：值 --------------使⽤：.@{变量}
.less⽂件中代码：
/
/Variables
@my-selector: bananer;
//Usage
.@{my-selector} {
font-weight: bold;
color: lightblue;
}
.css⽂件中对应的css代码:
.bananer {
font-weight: bold;
color: lightblue;
}
三、变量作为属性名称使⽤
使⽤⽅法与作为选择器名称使⽤⼀样：
.less⽂件中代码：
// Properties
@property: color;
.@{property} {
@{property}: red;
background-@{property}: green;
}
.css⽂件中对应的css代码：
.
color {
color: red;
background-color: green;
}
三、变量作为URL使⽤
语法：@变量：值 ----------- URL使⽤：url("@{变量}/图⽚名称")（注：变量即路径）直接在变量中直接写⼊完整的路径也是可以的
.less⽂件中的代码：
//URLs
@images: "../img";
body {
background-image: url("@{images}/white-sand.png");
}
.css⽂件中对应的css代码：
body {
background-image: url("../img/white-sand.png");
}
四、变量作为@import语句使⽤
⽤法跟URL⼀样
// Variables
@themes: "../test";
// Usage
@import "@{themes}/test.less";
在.css⽂件中输出的即为tess.less中所对应的css代码，⽽不是@import语句
五、变量作为变量名使⽤
在.less⽂件中，可以使⽤变量定义另⼀个变量的名称
.less⽂件中的代码：import语句
// Variable Variables
@primary: lightblue;
@secondary: lightyellow;
.section {
@color: primary;
.element {
color: @@color;
}
p {
color: @secondary;
}
}
.css⽂件中对应的css代码：
.section .element {
color: lightblue;
}
.section p {
color: lightyellow;
}
六、变量的Lazy Evaluation
变量在使⽤之前可以不必声明，可以在使⽤之后声明
如果存在局部变量，那么该作⽤域的属性会引⽤局部变量，如果不存在局部变量，那么后⾯声明的变量会覆盖前⾯声明的变量（如果声明了两个局部变量，同理）
.less⽂件中的代码：
// Lazy Evaluation
.lazy-eval {
width: @var;
@a: 100px;
}
@var: @a;
@a: 80px;
@a: 40px;
.css⽂件中对应的css代码：
.lazy-eval {
width: 100px;
}
七、属性作为变量
使⽤$prop语法将属性当作变量来使⽤
.less⽂件中的代码：
//  Properties as Variables
.widget {
color: #dafafb;
background-color: $color;
}
.ul {
height: 20px;
.li {
padding: $height;
}
height: 40px;
}
.css⽂件中对应的css代码：
.
widget {
color: #dafafb;
background-color: #dafafb;
}
.ul {
height: 20px;
height: 40px;
}
.ul .li {
padding: 40px;
}
⼋、默认变量
默认变量使得可以通过在后⾯放置定义来覆盖变量
.less⽂件中的代码：
// Default Variables
@base-color: green;
@dark-color: darken(@base-color, 20%);  //深绿⾊
.footer {
@base-color: red;
color: @dark-color;
}
.css⽂件中所对应的css代码：
.
footer {
color: #990000;  //深红⾊
}
由于延迟加载， @base-color已被覆盖并且@dark-color为深红⾊

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。