less学习笔记【变量部分】

20世纪30年代著名的建筑师路德维希·密斯·凡德罗曾说过：“less is more”，简单的东西往往带给人们的是更多的享受。著名js库jquery也曾用“write less, do more”为口号，以其平缓的学习曲线，吸引了一大批的使用者。用更少的成本完成更多的工作是人们一直所最求的，less也是如此，作为一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

接下来我将参考less官方网站，复习一下相关的less的语言特性。

变量

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

（1）设置选择器：

// 变量
@my-selector: banner;

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

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

（2）设置URLs：

// 变量
@images: "../img";

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

（3）import声明

// 变量
@themes: "../../src/themes";

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

（4）特性（properties）

//变量使用
@property: color;

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

（5）变量嵌套（用变量声明变量）

//使用
@fnord:  "I am fnord.";
@var:    "fnord";
content: @@var;
//编译后
content: "I am fnord.";

（6）惰性加载

//使用
.lazy-eval {
  width: @var;
}

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

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

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

//两者编译后皆为
.lazy-eval-scope {
  width: 9%;
}

当重复定义一个变量时，变量值采用最后一个定义，若当前作用域不存在词变量则向上级作用域查找，这点跟原生css是一样的，例如：

@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}
//编译后
.class {
  one: 1;
}
.class .brass {
  three: 3;
}

（7）默认变量

// less文件
@base-color: green;
@dark-color: darken(@base-color, 10%);

// 使用
@import "library.less";
@base-color: red;

有时我们需要设置一些变量的默认值，然后导入less文件就可直接使用变量。默认变量的值很容易就会被覆盖，遵从css语法。

嗨呀，吃饭去回来写extends部分。