css less_您应该知道的3个LESS CSS新功能

自上次有关LESS CSS的讨论以来已经有一段时间了 。 如今，LESS CSS已达到1.5版，并且随着新功能的发展而不断发展，使其具有更强大CSS预处理器功能。

其中有很多新增功能，在这篇文章中，我们将带您逐步了解我最喜欢的3个新功能，即“引用外部文件”，“扩展”，“合并属性”， 这可以帮助我们编写更好CSS。 让我们来看看。

文件导入

首先，让我们看一下LESS CSS如何使用@import规则处理外部文件。

有些人可能会将其样式表拆分为多个文件，而不是将其放在一个锅中。 然后，它们使用@import将其导入到另一个样式表，以便可以将这些文件中的Mixins （以及Variables ）在该其他文件中重用。

@import "external.less";

问题在于，LESS将编译来自这些外部文件的所有Mixins，这样我们最终将获得定义相同内容的多个样式规则。

看下面的示例：我们有两个LESS文件，分别称为style.less和external.less 。 我们将external.less导入style.less 。 然后，在external.less中使用.square mixin来定义方形框的样式。 在style.less内，我们像这样使用mixin。

@import "external";

.box {
	.square;
}

这将在CSS中产生以下结果。 .square mixin的样式规则.square生成，这是不好的。

.square {
	width: 100px;
	height: 100px;
	margin: 0 auto;
	background-color: red;
}
.box {
	width: 100px;
	height: 100px;
	margin: 0 auto;
	background-color: red;
}

在1.5版中，LESS引入了(reference) ，它可以用于指示LESS仅将导入文件用作参考，而不用于输出内容。

这样放置(reference)指令：

@import (reference) "external";

编译LESS样式表，现在不输出.square 。

.box {
	width: 100px;
	height: 100px;
	margin: 0 auto;
	background-color: red;
}

延伸

扩展方法是纯粹的令人敬畏。 从技术上讲，它将选择器共享相同的样式规则 ，从而使CSS更加整洁有序 。 当我们建立一个网站时，最终可能会遇到一些选择器，它们的样式规则非常相似，如下所示：

.box {
	width: 100px;
	height: 100px;
	margin: 0 auto;
	border: 1px solid black;
	background-color: transparent;
}
.box2 {
	width: 100px;
	height: 100px;
	margin: 0 auto;
	border: 1px solid black;
	background-color: red;	
}

它是多余的，并且不遵循最佳做法，建议将相同的样式放在一起。 在这种情况下，Sass的@extend指令可以完成这项工作，在LESS中，我们可以使用1.4版引入的&:extend()做类似的事情。

给定以上示例，我们可以执行以下操作：

@import (reference) "external";
.box {
	&:extend(.square);
	background-color: transparent;
}
.box2 {
	&:extend(.square);	
	background-color: red;
}

当编译为常规CSS时，以上代码将产生：

.square, .box, .box2 {
	width: 100px;
	height: 100px;
	margin: 0 auto;
	border: 1px solid black;
}
.box {
	background-color: transparent;
}
.box2 {
	background-color: red;
}

合并财产

另一个很酷的新功能是合并属性 。 此功能适用于接受多个值CSS属性，例如transform，transition和box-shadow 。 顾名思义，它将合并属于同一属性的值。 让我们在下面查看这个示例。

您可能已经知道， CSS3 Box Shadow属性接受多个阴影值。 通过使用此合并属性，您可以轻松构建阴影效果并使它们更易于管理。

在这里，我们创建了两个mixins .inner-shadow和.outer-shadow –我猜这些名称是不言而喻的。

.inner-shadow {
	box-shadow+: inset 10px 10px 5px #ccc;
}
.outer-shadow {
	box-shadow+: inset 10px 10px 5px #ccc;
}

请注意，我们在属性名称的末尾添加了+号。 要使此功能正常工作，必须使用+号。 然后，我们可以使用这些mixin，如下所示：

.box {
	.inner-shadow;
	.outer-shadow;
}
.box2 {
	.inner-shadow;
}
.box3 {
	.outer-shadow;
}

此代码将为我们提供以下结果。

.box {
  box-shadow: inset 10px 10px 5px #ccc, 10px 10px 5px #ccc;
}
.box2 {
  box-shadow: inset 10px 10px 5px #ccc;
}
.box3 {
  box-shadow: 10px 10px 5px #ccc;
}

最终思想

这3个新功能–引用外部文件，扩展，合并属性–促使我更多地使用LESS。 有了它们，我们可以编写更好，更易管理CSS。 我期待LESS在即将发布的版本中提供更多更酷的新功能。

翻译自: https://www.hongkiat.com/blog/less-css-new-features/