js 获得较浅的颜色_了解较少的颜色功能

从创建流畅的导航到如何更有效地使用LESS的技巧，我们已经介绍了很多有关LESS的内容，但是我们还没有涵盖所有这些内容。 在本文中，我们将研究LESS颜色功能。

色彩是使网站外观惊人的关键之一，只需看一下我们展示美丽的三色网站的展示即可 。 借助LESS，我们能够与变量更一致地定义和应用颜色，此外，我们还能够应用颜色功能来定制和变换颜色，而无需通过拾色器进行遍历。

功能

让我们尝试其中一些功能，看看它们如何工作。 出于本文的目的，我们选择绿色 （ #7bab2e ）作为此演示的变量；

@color: #7bab2e;

变暗和变亮

使用LESS颜色功能更改颜色确实很简单。 在下面的示例中，我们将@color暗20％的初始值。

.box.darken {
	background-color: @color;
	border: 3px solid darken(@color, 20%);
}

此代码将导致以下输出。 与绿色框内的颜色相比，边框更深。