标签：style blog ar color 使用 sp strong on 文件
作为 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 .@{mySelector} { 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; background-@{property}: #999; }
编译后
.widget { color: #0ee; background-color: #999; }
变量的变量名也可以是变量，如下：
@fnord: "I am fnord.";
@var: "fnord";
content: @@var;
编译后
content: "I am fnord.";
变量支持延迟加载，所以你可以在变量定义之前使用。如下：
.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，这是因为当一个变量被定义两次时，最后一次定义的生效。就类似于css中，对同一个元素定义不同的css样式，最后定义的生效。再比如下面这个
@var: 0; .class1 { @var: 1; .class { @var: 2; three: @var; @var: 3; } one: @var; }
编译后
.class1 .class { three: 3; } .class { one: 1; }
扩展选择器是less的伪类选择器，他会复制当前选择器，定义新的样式，而原来的不便
nav ul { &:extend(.inline); background: blue; } .inline { color: red; }
编译后
nav ul { background: blue; } .inline, nav ul { color: red; }
.a:extend(.b) {} 也可以这样使用 .a { &:extend(.b); }
.e:extend(.f) {} .e:extend(.g) {} // 上面等价于下面 .e:extend(.f, .g) {}
.bucket { tr { color: blue; } } .some-class:extend(.bucket tr) {}
编译后
.bucket tr, .some-class { color: blue; }
.a.class, .class.a, .class > .a { color: blue; } .test:extend(.class) {} // 不会匹配任何选择
:nth-child(1n+3) { color: blue; } .child:extend(n+3) {}
编译后
:nth-child(1n+3) { color: blue; }
注意：1n+3与n+3在css中是等价的，但是在less中不等价。
[title=identifier] { color: blue; } [title=‘identifier‘] { color: blue; } [title="identifier"] { color: blue; } .noQuote:extend([title=identifier]) {} .singleQuote:extend([title=‘identifier‘]) {} .doubleQuote:extend([title="identifier"]) {}
编译后
[title=identifier], .noQuote, .singleQuote, .doubleQuote { color: blue; } [title=‘identifier‘], .noQuote, .singleQuote, .doubleQuote { color: blue; } [title="identifier"], .noQuote, .singleQuote, .doubleQuote { color: blue; }
注意：less中不区分单引号双引号
.a.b.test, .test.c { color: orange; } .test { &:hover { color: green; } } .replacement:extend(.test all) {}
编译后
.a.b.test, .test.c, .a.b.replacement, .replacement.c { color: orange; } .test:hover, .replacement:hover { color: green; }
@variable: .bucket; @{variable} { // interpolated selector color: blue; } .some-class:extend(.bucket) {}// 不会匹配任何选择元素
.bucket { color: blue; } .some-class:extend(@{variable}) {} // 不会匹配任何元素 @variable: .bucket;
注意：extend不匹配变量。
@media print { .screenClass:extend(.selector) {} // extend inside media .selector { color: black; } } .selector { color: red; } @media screen { .selector { color: blue; } }
编译后
@media print { .selector, .screenClass { color: black; } } .selector { color: red; } @media screen { .selector { color: blue; } }
注意：extend只能匹配@media中前面定义的，在后面定义的将忽略。
在开发中我们会定义一些通用样式，然后单独样式在添加class，使用css的后面覆盖前面的原理来实现样式。extend也可以实现这种效果，如下：
.animal { background-color: black; color: white; } .bear { &:extend(.animal); background-color: brown; }
.my-inline-block() { display: inline-block; font-size: 0; } .thing1 { .my-inline-block; } .thing2 { .my-inline-block; }
编译后：
.thing1 { display: inline-block; font-size: 0; } .thing2 { display: inline-block; font-size: 0; }
使用extend
.my-inline-block { display: inline-block; font-size: 0; } .thing1 { &:extend(.my-inline-block); } .thing2 { &:extend(.my-inline-block); }
编译后
.my-inline-block, .thing1, .thing2 { display: inline-block; font-size: 0; }
标签：style blog ar color 使用 sp strong on 文件
原文地址：http://www.cnblogs.com/xiyangbaixue/p/4146657.html
