less引入less_关于LESS可能不知道的一些事情

less引入less

自从我们上一次对LESS进行报道以来已经有很长时间了。 上一次我们谈论它的时间是在2012年，当时LESS仍在1.2.0版本左右。 在撰写本文时，LESS即将到达2.0版，并且在每次迭代中都进行了许多改进以及一些新增功能。

在这篇文章中，我将重点介绍其中的一些功能，其中一些功能可能是您可能没有意识到的。

扩展选择器

首先，让我们谈谈extend 。 自从Sass和Stylus用户使用它已有一段时间以来，Extend是最需要的功能之一。 使用extend方法使我们可以通过对共享相同Mixin的选择器进行分组来产生更精简的输出。 它有助于我们保持样式DRY并最终减小样式表的大小。

在Sass和Stylus中，我们将使用@extend指令来扩展mixin。 LESS不同。 它使用其专有的伪类:extend() ，我认为选择使用伪类而不是@指令是一个明智的选择。

标准CSS伪类使我们可以在现有选择器中应用新样式规则，而无需完全覆盖初始样式。 :extend()也使用类似的原理，包括将新样式扩展到新样式规则中。

假设您有一个包含基本圆形样式的mixin，如下所示：

.circle {
  border-radius: 50%;
}

您可以使用:extend()伪类在其他选择器中共享.circle样式，如下所示：

.circle {
  border-radius: 50%;
}
.button:extend(.circle) {
  position: absolute;
  top: 0;
  left: 0;
}

或者，您可以将:extend()伪类嵌套为&表示法。

.circle {
  border-radius: 50%;
}
.button {
  &:extend(.circle);
  position: absolute;
  top: 0;
  left: 0;
}

这个例子将声明两个.button选择器； 第一个与.circle ，因此具有相同的border-radius ：

.circle,
.button {
    border-radius: 50%;
}
.button {
    position: absolute;
    top: 0;
    left: 0;
}

多个混合

您还可以在单​​个选择器中扩展多个混合。 在Sass和Stylus中，我们将在一个单独的@extend声明每个mixin，而在LESS中，我们:extend()一个逗号分隔为一个:extend()来声明这些mixin。 在前面的示例之后，我们可以添加另一个选择器来定义圆圈的默认品牌颜色，例如：

@gray: #ccc;
@gray-lighter: #f3f3f3;
.circle {
  border-radius: 50%;
}
.circle-default {
  background-color: @gray-lighter;
  border: 1px solid @gray;
}
.button {
  &:extend(.circle, .circle-default);
  position: absolute;
  top: 0;
  left: 0;
}

它将被编译成：

.circle,
.button {
  border-radius: 50%;
}
.circle-default,
.button {
  background-color: #f3f3f3;
  border: 1px solid #cccccc;
}
.button {
  position: absolute;
  top: 0;
  left: 0;
}

正如您在上面看到的那样，从扩展的mixin中共享相同样式的选择器被正确地声明在一起。

扩展嵌套选择器

您应该知道的另一件事是，LESS扩展方法将仅合并第一个选择器的样式。 来自子选择器或嵌套选择器的样式将不遵循。 因此，这里的.button类：

@gray: #ccc;
@gray-lighter: #f3f3f3;
.parent {
    color: @gray;
    .child {
        color: @gray-lighter;   
    }
}
.button:extend(.parent) {
    font-family: Arial;
}

不会从嵌套的.child选择器继承样式：

.parent,
.button {
  color: #cccccc;
}
.parent .child {
  color: #f3f3f3;
}
.button {
  font-family: Arial;
}

如果你想.button分享从风格.child ，你将不得不通过包括括号内的选择隐含告诉LESS：

.button:extend(.parent .child) {
    font-family: Arial;
}

在此示例中，输出为：

.parent,
.button {
  color: #cccccc;
}
.parent .child,
.button {
  color: #f3f3f3;
}
.button {
  font-family: Arial;
}

就个人而言，我喜欢LESS如何提供扩展方法。 它可以很好地控制mixin中的哪些选择器合并。 预先计划要如何声明网站的样式规则，并在您认为应通过样式表中的选择器共享特定样式规则时使用扩展。

占位符

Sass用户将熟悉占位符选择器。 占位符类似于包含一组属性声明的类或ID选择器，并且还与@extend指令一起使用。 但是，占位符用%符号声明，并且永远不会被编译和输出为CSS。 因此，在编译以下Sass代码示例时：

%rounded {
  border-radius: 30px
}
.button-default {
  @extend %rounded;
}

...它只会输出：

.button-default {
  border-radius: 30px;
}

LESS没有这样的特殊选择器，但是，您可以通过在选择器的末尾添加()来产生相同的输出。 例如：

.rounded() {
  border-radius: 30px
}
.button-default {
  .rounded;
}

在LESS中，此方法正式称为Mixins as Functions 。

更多导入选项

LESS引入了几个用于导入外部样式表的新选项。 我最喜欢的选项之一是(reference) 。 这告诉LESS不要在导入样式表的地方编译样式表。 LESS将使用此选项的样式表仅作为参考。 让我们再次来看第一个例子。

在这里，我们用基本样式形成一个圆圈。 但是，这次，我们将它们保存在单独的mixins文件mixins.less 。

@gray: #ccc;
@gray-lighter: #f3f3f3;
.circle {
  border-radius: 50%;
}
.circle-default {
  background-color: @gray-lighter;
  border: 1px solid @gray;
}

现在，我们使用(reference)命令将mixins.less文件导入到主样式表中。

@import (reference) "mixins.less";

然后，我们可以在整个主样式表中使用Mixins，例如：

.button {
  .circle;
  .circle-default;
  position: absolute;
  top: 0;
  left: 0;
}

如前所述，mixins.less文件中包含的mixins不会编译到主样式表中。 因此，输出将仅保留.button选择器：

.button {
  border-radius: 50%;
  background-color: #f3f3f3;
  border: 1px solid #cccccc;
  position: absolute;
  top: 0;
  left: 0;
}

当使用像Bootstrap这样的大型框架时，我发现此特定选项很有用（并且我经常使用）。

@import (reference) "less/bootstrap/bootstrap.less";

在上面的示例中，我们将能够重用和扩展一些Bootstrap混合函数和功能，同时保持主样式表不受Bootstrap混乱和混乱的影响。

将CSS转换为LESS

我认为您也会发现它真正有用的另一种选择是(less) 。 我们通常会合并仅以vanilla .css提供的库，如下所示：

@import "library.css";

以上面的示例为例，LESS会将其简单地视为CSS。 这意味着样式表将不会被编译，输出将保持原样（在我们的示例中为@import "library.css"; ），并且包含在其中的类选择器将无法用作mixin; 您将无法重用或扩展选择器。

如果希望它的行为更像LESS样式表，则必须使用(less)选项声明import语句。

@import (less) "library.css";

此外，如果您希望样式表作为参考显示，请结合使用(less)和(reference)导入样式表：

@import (less,reference) "library.css";

可变插值

雨果•吉劳德（Hugo Giraudel） 在他的《 Tuts +》文章中 ，详细解释了Sass中插值的内容，原因和方式。 LESS使用@{}插入变量，将变量名称放在方括号内，例如：

@variable: 'value';
@{variable} //interpolated

我们可以在文件中多次使用变量。 我经常使用这种技术来指定图像或字体的文件路径：

@path-img: 'assets/img';
.header {
  background-image: url('@{path-img}/bg.png');
}

您还可以在@import语句中包括插值，（据我所知）在Sass中尚无法实现。

// Variables
@path-less: 'src/less';
@path-img: 'assets/img';
 
// External Stylesheet
@import '@{path-less}/mixins.less';
 
// Styles
.header {
  background-image: url('@{path-img}/bg.png');
}

或者，也许用它来声明选择器和属性：

@name: color;
.default-@{property} {
  @{property}: #0ee;
  background-@{property}: #999;
}

如您所见，LESS中变量插值的使用和应用非常灵活。

合并物业价值

我们将在这里讨论的最后一个LESS新功能正在合并 。 通过合并，可以轻松处理接受多个值CSS属性，例如text-shadow ， box-shadow和transition 。

假设您要对按钮的颜色和背景应用过渡效果。 也许您有一个mixin，其中包含文本颜色的过渡声明。

.color-transition {
  transition: color 350ms;
}

现在，将其包含在具有现有过渡声明的另一个样式规则中：

.button {
  .color-transition;
  transition: background-color 300ms;
}

在这种情况下，您将在一个样式规则中得到两个transition声明：

.button {
  transition: color 350ms;
  transition: background-color 300ms;
}

color的过渡效果将不起作用，因为后者将覆盖第一个transition属性。 为了使颜色和背景过渡都起作用，您必须通过用逗号分隔每个值来在一个声明中包含这两个值。 这就是合并功能的用武之地。

在每个属性名称后添加一个加号，如下所示：

.color-transition() {
  transition+: color 350ms;
}
.button {
  .color-transition;
  transition+: background-color 300ms;
}

现在，在编译时将具有以下输出：

.button {
  transition: color 350ms, background-color 300ms;
}

结论

我认为这些（扩展，作为函数的混合，变量插值，导入选项和合并）是对LESS的非常重要的改进。 这些功能有效地帮助我们产生了更高效，更易于管理的样式。 也许是时候重新审视和重构您的旧代码了 ！

翻译自: https://webdesign.tutsplus.com/tutorials/a-few-things-you-might-not-know-about-less--cms-22527

less引入less