Less 02 变量（Variable）

目录：

Less 01 准备工作
Less 02 变量（Variable）
Less 03 扩展（Extend）
Less 04 混入（Mixins）
Less 05 参数混入（Parametric Mixins）
Less 06 方法混入 （Mixins as Functions）
Less 07 CssRules 直接混入（Passing Rulesets to Mixins）
Less 08 导入（Import）
Less 09 守卫（Guards）
Less 10 其他操作（完结）

概览

比如颜色等样式，一串16进制数字，在css中被重复写很多次是见很常见的事情（比如主题色）

通过less，可以增强语义化，同时简化操作

// Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

// Usage
a,
.link {
  color: @link-color;
}
a:hover {
  color: @link-color-hover;
}
.widget {
  color: #fff;
  background: @link-color;
}

---

用途

选择器

// Variables
@my-selector: banner;

// Usage
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

编译后为

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

URLs

// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

Imports

// Variables
@themes: "../../src/themes";

// Usage
@import "@{themes}/tidal-wave.less";

属性名

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

定义变量名

@fnord:  "I am fnord.";
@var:    "fnord";
content: @@var;

---

懒加载

下面这些都是有效的写法

.lazy-eval {
  width: @var;
}

@var: @a;
@a: 9%;

.lazy-eval-scope {
  width: @var;
  @a: 9%;
}

@var: @a;
@a: 100%;