动态的样式语言less语法详解之变量与extend

作为 CSS 的一种扩展，Less 不仅完全兼容 CSS 语法，而且连新增的特性也是使用 CSS 语法。这样的设计使得学习 Less 很轻松，而且你可以在任何时候回退到 CSS。less文件是以less作为文件后缀名，HTML引用时可以像css那样引用，如下：

<link rel="stylesheet/less" type="text/css" href="styles.less">

注意：本文描述的一切都是基于1.4.0版本，除非有特殊标明。

变量：
　　　变量的作用就是把值定义在一个地方，然后在各处使用，这样能让代码更易维护，如下：

复制代码代码如下:
// Variables
@link-color: #428bca; // sea blue
// 用法
a:link {
color: @link-color;
}
.widget {
color: #fff;
background: @link-color;
}

上面代码将颜色#428bca赋给一个变量@link-color，然后在color属性中使用变量，对应的css如下：

复制代码代码如下:
a:link {
color: #428bca;
}
.widget {
color: #fff;
background: #428bca;
}

变量不仅可以用在属性值上，也可以用在选择元素名，属性名(1.6.0支持)，url和import方法。如下：

选择元素名：

复制代码代码如下:
// Variables
@mySelector: banner;
// Usage
<a href=”mailto:.@{mySelector”>.@{mySelector</a>} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}

编译后为

复制代码代码如下:
.banner {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}

url：

复制代码代码如下:
// Variables
@images: “../img”;
// 用法
body {
color: #444;
background: url(“@{images}/white-sand.png”);
}

编译后

复制代码代码如下:
body {
color: #444;
background: url(“../img/white-sand.png”);
}
@import:
// Variables
@themes: “../../src/themes”;
// Usage
@import “@{themes}/tidal-wave.less”;

编译后

复制代码代码如下:
@import “../../src/themes/tidal-wave.less”;

属性名：

复制代码代码如下:
@property: color;
.widget {
@{property}: #0ee;
<a href=”mailto:background-@{property”>background-@{property</a>}: #999;
}

编译后

复制代码代码如下:
.widget {
color: #0ee;
background-color: #999;
}

变量的变量名也可以是变量，如下：

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

编译后

content: "I am fnord.";

延迟加载：
　　变量支持延迟加载，所以你可以在变量定义之前使用。如下：

复制代码