摘要：
作为 css 的一种扩展，less 不仅完全兼容 css 语法，而且连新增的特性也是使用 css 语法。这样的设计使得学习 less 很轻松，而且你可以在任何时候回退到 css。less文件是以less作为文件后缀名，html引用时可以像css那样引用，如下：
注意：本文描述的一切都是基于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;}
立即学习“前端免费学习笔记（深入）”；
Extend：扩展选择器是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;}
立即学习“前端免费学习笔记（深入）”；
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
657
