1. 变量用法:
所有变量都以@开头
1.1 选择器:
// Variables @my-selector: banner; // Usage .@{my-selector} { font-weight: bold; line-height: 40px; margin: 0 auto; } //Compiles to: .banner { font-weight: bold; line-height: 40px; margin: 0 auto; }
1.2 url
// Variables @images: "../img"; // Usage body { color: #444; background: url("@{images}/white-sand.png"); }
1.3 import 导入
// Variables @themes: "../../src/themes"; // Usage @import "@{themes}/tidal-wave.less";
1.4 属性名替换:
@property: color; .widget { @{property}: #0ee; background-@{property}: #999; } //Compiles to: .widget { color: #0ee; background-color: #999; }
1.5 变量名替换
@fnord: "I am fnord.";
@var: "fnord";
content: @@var;
//Which compiles to:
content: "I am fnord.";
1.6 变量的lazy loading
变量是lazy loading,因而不用再使用前命名。
变量查找方法:现在只了解本地文件的变量查找,方式如下:类似C++,每一个大括号下是一个作用域,通常会有一个大的作用域下面会有多个小的作用域,形成一个作用域链,如 最外层 -> .class -> .brass ,变量查找时,首先会查找当前作用域,如果当前作用域有,则选最后一个,如果没有,则往上一层作用域查找,直到找到最上面一层。如果都没有,则会报错并提示该变量没有定义。
@var: 0; .class { @var: 1; .brass { @var: 2; three: @var; @var: 3; } one: @var; } //Compiles to: .class { one: 1; } .class .brass { three: 3; }