Less学习笔记（一）之变量

前言

less是一种css的扩展语言，一般需要less.js工具将less样式转换成css样式

变量可以替换多次重复出现的属性或者属性值，这样在修改需求时只需要在这一处修改变量值，可以提高工作效率

1、替换多次重复出现的属性的值

当文件中多次重复出现n次多同一个属性值时，可以用变量替换这个变量值，当以后需要改变属性值时直接改变变量的值    ·

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
} 

编译为：

#header {
  color: #6c94be;
}

2、作为选择器

@my-selector: banner;

.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

编译为：

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

3、URL网址

当项目特别复杂时，文件路径也会特别复杂，假如用变量替换路径，就可以特别方便快捷的定义文件路i经

@images: "../img";

body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

4、引入语句

引入语句和引入文件类似

@themes: "../../src/themes";

@import "@{themes}/tidal-wave.less";

5、属性

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

编译成：

.widget {
  color: #0ee;
  background-color: #999;
}

6、二次变量

@primary:  green;
@secondary: blue;

.section {
  @color: primary;

  .element {
    color: @@color;
  }
}

编译为：

.section .element {
  color: green;
}

7、作为变量的属性

当属性定义多个属性值时，Less将选择当前/父级范围内的最后一个属性作为“最终”值

.block {
  color: red; 
  .inner {
    background-color: $color; 
  }
  color: blue;  
} 

编译为：

.block {
  color: red; 
  color: blue;  
} 
.block .inner {
  background-color: blue; 
}

8、变量多次定义选取规则

当同级类中定义变量两次时，将使用变量的最后一个定义

@var: 0;
.class {      //.class同级中定义了一次@var
  @var: 1;
  .brass {     //.brass同级中定义了两次@var，最后取最后一个定义的变量值
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}

编译为：

.class {
  one: 1;
}
.class .brass {
  three: 3;
}