less语法（一）变量与extend
摘要：
作为 CSS 的一种扩展，Less 不仅完全兼容 CSS 语法，而且连新增的特性也是使用 CSS 语法。这样的设计使得学习 Less 很轻松，而且你可以在任何时候回退到 CSS。less文件是以less作为文件后缀名，HTML引用时可以像css那样引用，如下：
注意：本文描述的一切都是基于1.4.0版本，除非有特殊标明。
变量：
变量的作用就是把值定义在一个地方，然后在各处使用，这样能让代码更易维护，如下：
<span style="color: #800000;">// Variables
@link-color: #428bca; // sea blue
// 用法
a:link </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> @link-color</span>;
}<span style="color: #800000;">
.widget </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> @link-color</span>;
}登录后复制
上面代码将颜色#428bca赋给一个变量@link-color，然后在color属性中使用变量，对应的css如下：
<span style="color: #800000;">a:link </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #428bca</span>;
}<span style="color: #800000;">
.widget </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> #428bca</span>;
}登录后复制
变量不仅可以用在属性值上，也可以用在选择元素名，属性名(1.6.0支持)，url和import方法。如下：
选择元素名：
<span style="color: #800000;">// Variables
@mySelector: banner;
// Usage
.@</span>{<span style="color: #ff0000;">mySelector</span>} {<span style="color: #ff0000;">
font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
margin</span>:<span style="color: #0000ff;"> 0 auto</span>;
}登录后复制
编译后为
<span style="color: #800000;">.banner </span>{<span style="color: #ff0000;">
font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">
line-height</span>:<span style="color: #0000ff;"> 40px</span>;<span style="color: #ff0000;">
margin</span>:<span style="color: #0000ff;"> 0 auto</span>;
}登录后复制
url：
<span style="color: #800000;">// Variables
@images: "../img";
// 用法
body </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #444</span>;<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> url("@{images</span>}<span style="color: #800000;">/white-sand.png");
}</span>登录后复制
编译后
<span style="color: #800000;">body </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #444</span>;<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> url("../img/white-sand.png")</span>;
}登录后复制
@import:
<span style="color: #800000;">// Variables
@themes: "../../src/themes";
// Usage
@import "@</span>{<span style="color: #ff0000;">themes</span>}<span style="color: #800000;">/tidal-wave.less";</span>登录后复制
编译后
<span style="color: #800000;">@import "../../src/themes/tidal-wave.less";</span>
登录后复制
属性名：
<span style="color: #800000;">@property: color;
.widget </span>{<span style="color: #ff0000;">
@{property</span>}<span style="color: #800000;">: #0ee;
background-@</span>{<span style="color: #ff0000;">property</span>}<span style="color: #800000;">: #999;
}</span>登录后复制
编译后
<span style="color: #800000;">.widget </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> #0ee</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;"> #999</span>;
}登录后复制
变量的变量名也可以是变量，如下：
<span style="color: #800000;">@fnord: "I am fnord."; @var: "fnord"; content: @@var;</span>
登录后复制
编译后
<span style="color: #800000;">content: "I am fnord.";</span>
登录后复制
延迟加载：
变量支持延迟加载，所以你可以在变量定义之前使用。如下：
<span style="color: #800000;">.lazy-eval </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> @var</span>;
}<span style="color: #800000;">
@var: @a;
@a: 9%;</span>登录后复制
或者
<span style="color: #800000;">.lazy-eval-scope </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> @var</span>;<span style="color: #ff0000;">
@a</span>:<span style="color: #0000ff;"> 9%</span>;
}<span style="color: #800000;">
@var: @a;
@a: 100%;</span>登录后复制
上面两个都会被编译成如下
<span style="color: #800000;">.lazy-eval-scope </span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 9%</span>;
}登录后复制
问什么第二个也会被编译成上面的css，这是因为当一个变量被定义两次时，最后一次定义的生效。就类似于css中，对同一个元素定义不同的css样式，最后定义的生效。再比如下面这个
<span style="color: #800000;">@var: 0;
.class1 </span>{<span style="color: #ff0000;">
@var</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
.class {
@var</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;">
three</span>:<span style="color: #0000ff;"> @var</span>;<span style="color: #ff0000;">
@var</span>:<span style="color: #0000ff;"> 3</span>;
}<span style="color: #800000;">
one: @var;
}</span>登录后复制
编译后
<span style="color: #800000;">.class1 .class </span>{<span style="color: #ff0000;">
three</span>:<span style="color: #0000ff;"> 3</span>;
}<span style="color: #800000;">
.class </span>{<span style="color: #ff0000;">
one</span>:<span style="color: #0000ff;"> 1</span>;
}登录后复制
Extend：
扩展选择器是less的伪类选择器，他会复制当前选择器，定义新的样式，而原来的不便
<span style="color: #800000;">nav ul </span>{<span style="color: #ff0000;">
&</span>:<span style="color: #0000ff;">extend(.inline)</span>;<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">
.inline </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> red</span>;
}登录后复制
编译后
<span style="color: #800000;">nav ul </span>{<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">
.inline,
nav ul </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> red</span>;
}登录后复制
语法：
<span style="color: #800000;">.a:extend(.b) </span>{}<span style="color: #800000;">
也可以这样使用
.a </span>{<span style="color: #ff0000;">
&</span>:<span style="color: #0000ff;">extend(.b)</span>;
}登录后复制
<span style="color: #800000;">.e:extend(.f) </span>{}<span style="color: #800000;">
.e:extend(.g) </span>{}<span style="color: #800000;">
// 上面等价于下面
.e:extend(.f, .g) </span>{}登录后复制
嵌套选择器：
<span style="color: #800000;">.bucket </span>{<span style="color: #ff0000;">
tr {
color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">
}
.some-class:extend(.bucket tr) </span>{}登录后复制
编译后
<span style="color: #800000;">.bucket tr,
.some-class </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> blue</span>;
}登录后复制
精确匹配：
<span style="color: #800000;">.a.class,
.class.a,
.class > .a </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">
.test:extend(.class) </span>{}<span style="color: #800000;"> // 不会匹配任何选择</span>登录后复制
nth：
<span style="color: #800000;">:nth-child(1n+3) </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">
.child:extend(n+3) </span>{}登录后复制
编译后
<span style="color: #800000;">:nth-child(1n+3) </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> blue</span>;
}登录后复制
注意：1n+3与n+3在css中是等价的，但是在less中不等价。
属性选择器：
<span style="color: #800000;">[title=identifier] </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">
[title='identifier'] </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">
[title="identifier"] </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">
.noQuote:extend([title=identifier]) </span>{}<span style="color: #800000;">
.singleQuote:extend([title='identifier']) </span>{}<span style="color: #800000;">
.doubleQuote:extend([title="identifier"]) </span>{}登录后复制
编译后
<span style="color: #800000;">[title=identifier],
.noQuote,
.singleQuote,
.doubleQuote </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">
[title='identifier'],
.noQuote,
.singleQuote,
.doubleQuote </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">
[title="identifier"],
.noQuote,
.singleQuote,
.doubleQuote </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> blue</span>;
}登录后复制
注意：less中不区分单引号双引号
关键字all：
<span style="color: #800000;">.a.b.test,
.test.c </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> orange</span>;
}<span style="color: #800000;">
.test </span>{<span style="color: #ff0000;">
&</span>:<span style="color: #0000ff;">hover {
color: green</span>;
}<span style="color: #800000;">
}
.replacement:extend(.test all) </span>{}登录后复制
编译后
<span style="color: #800000;">.a.b.test,
.test.c,
.a.b.replacement,
.replacement.c </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> orange</span>;
}<span style="color: #800000;">
.test:hover,
.replacement:hover </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> green</span>;
}登录后复制
变量选择器：
<span style="color: #800000;">@variable: .bucket;
@</span>{<span style="color: #ff0000;">variable</span>} {<span style="color: #ff0000;"> // interpolated selector
color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">
.some-class:extend(.bucket) </span>{}<span style="color: #800000;">// 不会匹配任何选择元素</span>登录后复制
<span style="color: #800000;">.bucket </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">
.some-class:extend(@</span>{<span style="color: #ff0000;">variable</span>}<span style="color: #800000;">) </span>{}<span style="color: #800000;"> // 不会匹配任何元素
@variable: .bucket;</span>登录后复制
注意：extend不匹配变量。
@media：
<span style="color: #800000;">@media print </span>{<span style="color: #ff0000;">
.screenClass</span>:<span style="color: #0000ff;">extend(.selector) {</span>}<span style="color: #800000;"> // extend inside media
.selector </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> black</span>;
}<span style="color: #800000;">
}
.selector </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> red</span>;
}<span style="color: #800000;">
@media screen </span>{<span style="color: #ff0000;">
.selector {
color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">
}</span>登录后复制
编译后
<span style="color: #800000;">@media print </span>{<span style="color: #ff0000;">
.selector,
.screenClass {
color</span>:<span style="color: #0000ff;"> black</span>;
}<span style="color: #800000;">
}
.selector </span>{<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> red</span>;
}<span style="color: #800000;">
@media screen </span>{<span style="color: #ff0000;">
.selector {
color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">
}</span>登录后复制
注意：extend只能匹配@media中前面定义的，在后面定义的将忽略。
使用extend重写样式：
在开发中我们会定义一些通用样式，然后单独样式在添加class，使用css的后面覆盖前面的原理来实现样式。extend也可以实现这种效果，如下：
<span style="color: #800000;">.animal </span>{<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;"> black</span>;<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> white</span>;
}<span style="color: #800000;">
.bear </span>{<span style="color: #ff0000;">
&</span>:<span style="color: #0000ff;">extend(.animal)</span>;<span style="color: #ff0000;">
background-color</span>:<span style="color: #0000ff;"> brown</span>;
}登录后复制
减少css代码：
<span style="color: #800000;">.my-inline-block() </span>{<span style="color: #ff0000;">
display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
font-size</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.thing1 </span>{<span style="color: #ff0000;">
.my-inline-block;
</span>}<span style="color: #800000;">
.thing2 </span>{<span style="color: #ff0000;">
.my-inline-block;
</span>}登录后复制
编译后：
<span style="color: #800000;">.thing1 </span>{<span style="color: #ff0000;">
display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
font-size</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.thing2 </span>{<span style="color: #ff0000;">
display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
font-size</span>:<span style="color: #0000ff;"> 0</span>;
}登录后复制
使用extend
<span style="color: #800000;">.my-inline-block </span>{<span style="color: #ff0000;">
display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
font-size</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
.thing1 </span>{<span style="color: #ff0000;">
&</span>:<span style="color: #0000ff;">extend(.my-inline-block)</span>;
}<span style="color: #800000;">
.thing2 </span>{<span style="color: #ff0000;">
&</span>:<span style="color: #0000ff;">extend(.my-inline-block)</span>;
}登录后复制
编译后
<span style="color: #800000;">.my-inline-block,
.thing1,
.thing2 </span>{<span style="color: #ff0000;">
display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;">
font-size</span>:<span style="color: #0000ff;"> 0</span>;
}登录后复制
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
刺客信条阴影：贝壳谜语解决方案
3 周前
By DDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前
By DDD
在哪里可以找到原子中的起重机控制钥匙卡
3 周前
By DDD
<🎜>：死铁路 - 如何完成所有挑战
4 周前
By DDD
Atomfall指南：项目位置，任务指南和技巧
4 周前
By DDD
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
HTML容易为初学者学习吗？
Apr 07, 2025 am 12:11 AM
HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。
HTML，CSS和JavaScript的角色：核心职责
Apr 08, 2025 pm 07:05 PM
HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。
HTML中起始标签的示例是什么？
Apr 06, 2025 am 12:04 AM
AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。
了解HTML，CSS和JavaScript：初学者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
网页批注如何实现Y轴位置的自适应布局？
Apr 04, 2025 pm 11:30 PM
网页批注功能的Y轴位置自适应算法本文将探讨如何实现类似Word文档的批注功能，特别是如何处理批注之间的间�...
Gitee Pages静态网站部署失败：单个文件404错误如何排查和解决？
Apr 04, 2025 pm 11:54 PM
GiteePages静态网站部署失败：404错误排查与解决在使用Gitee...
如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果？
Apr 05, 2025 am 06:15 AM
实现图片点击后周围图片散开并放大效果许多网页设计中，需要实现一种交互效果：点击某张图片，使其周围的...
HTML，CSS和JavaScript：Web开发人员的基本工具
Apr 09, 2025 am 12:12 AM
HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。
