03.less中的变量，变量插值，及运算

发表于 | 分类于

less中的变量

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

  2. less中定义变量的格式

1
@变量名称:值;
  1. less中使用变量的格式
1
2
3
@变量名称;
@w: 400px;
@h: 200px;
  1. 和js一样可以将一个变量赋值给另外一个变量
    @变量名称 : @变量名称;
1
@h: @w;

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@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;

变量插值

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

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

1
2
3
4
5
@{s}{
  @{w}: @size;
  height: @size;
  background: red;
}

Less中的运算

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