📜  LESS扩展

📅  最后修改于: 2021-01-06 04:40:48             🧑  作者: Mango

延伸少

扩展是Less的功能。扩展功能充当伪类,通过使用以下方法在一个选择器中扩展其他选择器的样式:

让我们以一个示例来看一下Less文件中的扩展。

创建一个名为“ simple.html”的HTML文件,其中包含以下数据。

HTML档案:simple.html



 


 

Less Extend Example

Welcome to JavaTpoint

现在创建一个名为“ simple.less”的文件。它类似于CSS文件。唯一的区别是它以“ .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




   


   

Welcome to JavaTpoint

A solution of all technology.

更少的文件: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 Attached to Selector Extend is connected to a selector, looks like a pseudo class with selector as parameter.
2) Extend Inside Ruleset The &:extend(selector) syntax can be put inside the body of ruleset.
3) Extending Nested Selectors Nested selectors are matched using extend selector.
4) Exact Matching with Extend By default , this is used for the exact match between the selectors.
5) nth Expression The form of nth expression is used in extend otherwise. Without this expression, it treats selector as different.
6) Extend “all” The keyword all is identified at last in extend argument and then Less matches that selector as part of another selector.
7) Selector Interpolation with Extend It is used to connect to interpolated selector.
8) Scoping/Extend inside @media It extends matches the selector only that is present inside the same media declaration.
9) Duplication Detection It cannot detect the duplication of selectors.

扩展用例

Index Type Description
1) Classic Use Case Classic Use Case is used to keep away adding the base class in Less.
2) Reducing CSS Size The extend syntax moves the selector away from the properties you want to use, which helps in reducing the CSS generated code.
3) Combining Styles/ A More Advanced Mixin It is used to combine the same styles of a particular selectors into other selector.