less中的变量

1. 什么是变量?和js中的概念基本一样

2. less中定义变量的格式

@变量名称:值;

3. less中使用变量的格式

@变量名称;
@w: 400px;
@h: 200px;

4. 和js一样可以将一个变量赋值给另外一个变量
   @变量名称 : @变量名称;

@h: @w;

5. 和js一样less中的变量也有全局变量和局部变量
   定义在{}外面的就是全局的变量,什么地方都可以使用，定义在{}里面的就是局部变量, 只能在{}中使用
   注意: less中的变量是延迟加载的,写到后面也能在前面使用

6. 和js一样不同作用域的变量不会相互影响, 只有相同作用域的变量才会相互影响，和js一样在访问变量时会采用就近原则

@c: red;
.box1{
  @c: blue;
  width: @w;
  height: @h;
  background: @c;
  margin-bottom: 20px;
  @c: pink;
}
.box2{
  width: @w;
  height: @h;
  background: @c;
}
@c: red;

变量插值

6. 什么是变量插值?在less中如果属性的取值可以直接使用变量, 但是如果是属性名称或者选择器名称并不能直接使用变量，如果属性名称或者选择器名称想使用变量中保存的值,那么必须使用变量插值的格式

7. 变量插值的格式
   格式: @{变量名称}

@{s}{
  @{w}: @size;
  height: @size;
  background: red;
}

Less中的运算

8. less中的运算和CSS3中新增的calc函数一样, 都支持+ - * / 运算

div{
  width: 200px;
  height: 200px;
  background: blue;
  position: absolute;
  left: 50%;
  /*less中的运算和CSS3中新增的calc函数一样, 都支持+ - * / 运算*/
  //margin-left: (-200px * 0.5);
  margin-left: (-200px / 2);
}