Less扩展详解 Less扩展|Less

本文概述

扩展语法
Less中使用的扩展语法列表
扩展用例

扩展是Less的功能。扩展功能充当伪类, 通过使用以下方法在一个选择器中扩展其他选择器的样式：
让我们举个例子来看一下Less文件中的扩展。
创建一个名为” simple.html” 的HTML文件, 其中包含以下数据。
HTML档案：simple.html

< !DOCTYPE html> < head> < link rel="stylesheet" href="http://www.srcmini.com/simple.css" type="text/css" /> < /head> < body> < h2> Less Extend Example< /h2> < h3> Welcome to srcmini< /h3> < /body> < /html>

现在创建一个名为” simple.less” 的文件。它类似于CSS文件。唯一的区别是它以” .less” 扩展名保存。
【Less扩展详解】Less的文件：simple.less

h2 {& :extend(.style); font-style: italic; }.style {background: lightgreen; }

将文件” simple.html” 和” simple.less” 都放在Node.js的根文件夹中
现在, 执行以下代码：lessc simple.less simple.css

文章图片
这将编译” simple.less” 文件。将生成一个名为” simple.css” 的CSS文件。
例如：

文章图片
生成的CSS” simple.css” 具有以下代码：

h2 {font-style: italic; }.style, h2 {background: lightgreen; }

输出

文章图片
扩展语法它用于添加多个类。扩展放置在规则集中或附加到选择器。与伪类一样, 它包含一个或多个用逗号分隔的类。每个选择器后面都可以使用可选关键字all。
让我们举个例子：
HTML档案：simple.html

< !DOCTYPE html> < !doctype html> < head> < link rel="stylesheet" href="http://www.srcmini.com/simple.css" type="text/css" /> < /head> < body> < div class="style"> < h2> Welcome to srcmini< /h2> < div class="container"> < p> A solution of all technology.< /p> < /div> < /div> < /body> < /html>

Less的文件：simple.Less

.style:extend(.container, .img){background: violet; }.container {font-style: italic; }.img{font-size: 30px; }

将文件” simple.html” 和” simple.less” 都放在Node.js的根文件夹中
现在, 执行以下代码：lessc simple.Less simple.css

文章图片
这将编译” simple.Less” 文件。将生成一个名为” simple.css” 的CSS文件。
例如：

文章图片
生成的CSS” simple.css” 具有以下代码：

.style {background: violet; }.container, .style {font-style: italic; }.img, .style {font-size: 30px; }

输出

文章图片
Less中使用的扩展语法列表

Index	Type	Description
1)	扩展附加到选择器	Extend连接到一个选择器, 看起来像一个以选择器作为参数的伪类。
2)	扩展内部规则集	可以将＆：extend(selector)语法放在规则集的主体内。
3)	扩展嵌套选择器	嵌套选择器使用扩展选择器进行匹配。
4)	精确匹配与扩展	默认情况下, 这用于选择器之间的精确匹配。
5)	nth Expression	否则, 将在扩展中使用第n个表达式的形式。没有此表达式, 它将选择器视为不同。
6)	扩展” 全部”	最后在extend参数中标识了关键字all, 然后Less与该选择器匹配, 成为另一个选择器的一部分。
7)	带扩展的选择器插值	用于连接到插补选择器。
8)	在@media范围内/扩展	它扩展匹配仅在同一媒体声明中存在的选择器。
9)	Duplication Detection	它无法检测到选择器的重复。

扩展用例

Index	Type	Description
1)	经典用例	经典用例用于避免在Less中添加基类。
2)	LessCSS大小	扩展语法使选择器远离要使用的属性, 这有助于LessCSS生成的代码。
3)	组合样式/更高级的混音	它用于将特定选择器的相同样式组合到其他选择器中。