变量

1 声明 Less 变量

@width: 10px;
@height: @width + 10px;

2 Less 变量的使用

• 1. 作为普通属性值只来使用：直接使用 @pink
• 1. 作为选择器和属性名：@{selector的值} 的形式

@width: 500px;
@g:grey;
@w:wrap;
@bg:background;

#@{w}{
  width: @width;
  height: 400px;
  @{bg}: pink;
}
#header {
  width: @width;
  @{bg}: @g;
}

编译为：

#wrap {
  width: 500px;
  height: 400px;
  background: pink;
}
#header {
  width: 500px;
  background: gray;
}

3 Less 变量作用域和延迟加载

@var: 0px;
.class {
  @var: 1px;
  .brass {
    @var: 2px;
    width: @var;
    @var: 3px;
  }
  width: @var;
}

编译为：

.class {
  width: 1px;
}
.class .brass {
  width: 3px;
}

作用域：

1. 首先在本地查找变量和混合函数

2. 如果找不到它们，则从“父”范围继承。

延迟加载（懒加载），是作用域基础上的特性：

1. 先找子元素，如果出现两个相同的变量，我们拿后边的
2. 再找父元素，把子元素的东西排除掉
3. 如果当前找不到这个变量，他需要到上一层去找