Less教程
Less函数

Less 扩展

Less扩展

扩展是Less的功能。扩展功能充当伪类,通过使用以下方法在一个选择器中扩展其他选择器的样式:
让我们举个例子,看看在Less文件中扩展的使用。
创建一个名为"simple.html"的HTML文件,其中包含以下数据。
HTML文件: simple.html
<!DOCTYPE html>
<head>
 <link rel="stylesheet" href="simple.css" type="text/css" />
</head>
<body>
 <h2>Less Extend Example</h2>
 <h3>Welcome to lidihuo</h3>
</body>
</html>
现在创建一个名为"simple.less"的文件。它类似于CSS文件。唯一的区别是它以" .less"扩展名保存。
less的文件: simple.less
h2 {
  &:extend(.style);
  font-style: italic;
}
.style {
  background: lightgreen;
}
将文件"simple.html"和"simple.less"都放入Node.js的根文件夹中
现在,执行以下代码: lessc simple.less simple。 css
少扩展1
这将编译"simple.less"文件。将生成一个名为" simple.css"的CSS文件。
例如:
缺少扩展2
生成的CSS" simple.css",具有以下代码:
h2 {
  font-style: italic;
}
.style,
h2 {
  background: lightgreen;
} 

扩展语法

它用于添加多个类。扩展放置在规则集中或附加到选择器。与伪类一样,它包含一个或多个用逗号分隔的类。每个选择器后面都可以使用可选关键字 all。
让我们举个例子:
HTML文件: simple.html
<!DOCTYPE html>
<!doctype html>
<head>
   <link rel="stylesheet" href="simple.css" type="text/css" />
</head>
<body>
   <div class="style">
    <h2>Welcome to lidihuo</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简单。 css
少扩展4
这将编译"simple.less"文件。将会生成一个名为" simple.css"的CSS文件。
例如:
少扩展5
生成的CSS" simple.css"具有以下代码:
.style {
  background: violet;
}
.container,
.style {
  font-style: italic;
}
.img,
.style {
  font-size: 30px;
}

Less中使用的扩展语法列表

类型 说明
扩展附加到选择器 扩展连接到一个选择器,看起来像一个以选择器作为参数的伪类。
扩展规则集内部 &: extend(selector)语法可以放在规则集的正文中。
扩展嵌套选择器 嵌套选择器使用扩展选择器进行匹配。
与扩展完全匹配 默认情况下,这用于选择器之间的完全匹配。
第n个表达式 否则,将在扩展中使用第n个表达式的形式。没有此表达式,它将选择器视为不同。
扩展"全部" 最后在extend参数中标识了关键字all,然后Less将该选择器作为另一个选择器的一部分进行匹配。
具有扩展的选择器插值 用于连接到插补选择器。
在@media范围内/扩展 它的扩展仅与存在于同一媒体声明中的选择器匹配。
重复检测 它无法检测到选择器的重复。

扩展用例

类型 说明
经典用例 经典用例用于避免在Less中添加基类。
减小CSS大小 extend语法使选择器远离您要使用的属性,这有助于减少CSS生成的代码。
组合样式/更高级的混音 用于将特定选择器的相同样式组合到其他选择器中。
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4