Less 变量

概念

使用 @ 符号定义变量，变量分配使用 : 完成。

声明格式：@变量名：变量值。

一般看到不少重复的相同的值，咱们能够经过使用变量来避免。

Less中的变量和其余编程语言同样，能够实现值的复用，一样的它也有做用域，简单的来讲就是变量的做用域就是局部变量和全局变量的概念；变量做用域采用的是就近原则，也就是说咱们须要先查找本身自己是否有这个变量，若是有就使用自身变量，没有的话就查找上一级父元素，以此类推。

可变插值

• 选择器名插值（能够引用任何变量）
• 属性名插值（能够引用任何变量）
• URL插值（用来保存URL，并在url()中使用它）
• import 插值（import语句中，用来保存路径的变量）
• 媒体查询插值

导入语句

版本：1.4.0

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

注意：在v2.0.0以前，咱们仅考虑在根范围或者当前范围内声明的变量，而且在查找变量时仅考虑当前文件和调用文件。

// 变量
    @themes: "../../src/themes";
    
    // 用法
    @import "@{themes}/tidal-wave.less";

属性

版本：1.6.0

@property: color;
    
    .widget {
      @{property}: #0ee;
      background-@{property}: #999;
    }
    
    // 编译为
    .widget{
        color: #0ee;
        background: #999;
    }

变量名

可使用变量名称定义变量。

@fnord:  "I am fnord.";
    @var:    "fnord";
    content: @@var;
    
    // 编译为
    content: "I am fnord.";

延迟加载

变量是延迟加载的，无需在使用前声明。

.lazy-eval-scope {
      width: @var;
      @a: 9%;
    }
    
    @var: @a;
    @a: 100%;
    
    // 编译为
    .lazy-eval-scope {
      width: 9%;
    }

默认变量

有时候咱们会请求默认变量：一种仅在还没有设置变量的状况下才能够设置的功能，不须要这个功能是由于咱们能够经过在后面放置定义来轻松覆盖变量。