flash炼金术和混淆
Color is one of the most important elements in any visual design. When properly used, it can have great impact on your web site or application. But knowing color theory solely is not enough to achieve such impact. You need to have the right tool belt to operate easily and successfully with the multitude of colors. Fortunately, Less solves this practical problem by providing plenty of color functions to work with.
色彩是任何视觉设计中最重要的元素之一。 正确使用它会对您的网站或应用程序产生巨大影响。 但是仅了解色彩理论不足以实现这种效果。 您需要正确的工具带才能轻松，成功地使用多种颜色。 幸运的是， Less通过提供大量的色彩功能来解决此实际问题。
In this tutorial, I’ll explore how to use some of these color functions, in conjunction with other Less features, to produce flexible and reusable mixins for color manipulation.
在本教程中，我将探讨如何将其中一些颜色功能与其他Less功能结合使用，以产生灵活且可重复使用的混合器来进行颜色处理。
When attempting to create color schemes with Less, most people take the most obvious approach, which looks like this:
尝试使用Less创建颜色方案时，大多数人会采用最明显的方法，如下所示：
@base-color: #00ff00; @triad-secondary: spin(@base-color, 120); @triad-tertiary: spin(@base-color, -120);This method uses variables and Less’s spin() function to create a color scheme (triadic, in our case). This works fine, but for me it’s not particularly reusable and not flexible enough. Fortunately, the issue can be resolved by using mixins. Let’s see what I mean.
此方法使用变量和Less的spin()函数创建配色方案(在我们的示例中为三重色)。 这很好用，但是对我而言，它不是特别可重用且不够灵活。 幸运的是，可以使用mixins解决此问题。 让我们看看我的意思。
.analog(@color, @variant, @property) { @first: spin(@color, 30); @second: spin(@color, -30); @list: @first, @second; @return: extract(@list, @variant); @{property}: @return; } .triad(@color, @variant, @property) { @first: spin(@color, 120); @second: spin(@color, -120); @list: @first, @second; @return: extract(@list, @variant); @{property}: @return; } .quad(@color, @variant, @property) { @first: spin(@color, 90); @second: spin(@color, -90); @third: spin(@color, 180); @list: @first, @second, @third; @return: extract(@list, @variant); @{property}: @return; }The above code creates three types of color schemes. I’ll explain only the last one, because the first two have the same structure and they don’t need individual explanations.
上面的代码创建三种类型的配色方案。 我将仅解释最后一个，因为前两个具有相同的结构，并且不需要单独的解释。
The .quad() mixin takes three parameters. The first one sets the base color for the scheme. The second one tells the mixin which color variant to return. And the third one defines which CSS property to use when Less compiles the code. Inside the mixin’s body, the spin() function creates the three available color variants in a quad scheme, then these variants are put in a list. The extract() function gets the desired variant, defined in the second parameter. And finally, with the help of variable interpolation, the color variant is assigned to the defined CSS property.
.quad()混合使用三个参数。 第一个设置方案的基本颜色。 第二个告诉mixin返回哪个颜色变体。 第三个定义了Less编译代码时使用CSS属性。 在mixin的主体内部， spin()函数以四边形方案创建三个可用的颜色变体，然后将这些变体放入列表中。 extract()函数获得所需的变体，该变体在第二个参数中定义。 最后，借助变量插值 ，将颜色变体分配给已定义CSS属性。
We can now put the above code in a separate file called color_schemes.less and use it as follows:
现在，我们可以将上面的代码放在一个单独的名为color_schemes.less文件中，并按以下方式使用它：
@import "color_schemes.less"; @base-color: #00ff00; div { width: 200px; height: 100px; border: thick solid; .quad(@base-color, 3, border-color); .quad(@base-color, 2, color); .quad(@base-color, 1, background-color); }Here we import the file with the color schemes, and then we define the base color for our website or application. The last three lines in the div rule set, define the colors for the border-color, color, and background-color properties.
在这里，我们使用配色方案导入文件，然后定义网站或应用程序的基本颜色。 div规则集中的最后三行定义了border-color ， color和background-color属性background-color 。
As you can see, the mixin can be used with any property whose expected value is a color. Besides, it’s super easy to see for which property a particular statement is used; just take a look at the end, and boom, we know it. For example, in the last statement you can clearly see that the first color variant of the quad scheme will be used as the value for the background-color property. Pretty cool, huh?
如您所见，mixin可以与期望值是颜色的任何属性一起使用。 此外，很容易看到特定语句用于哪个属性。 看看结局，繁荣就知道了。 例如，在最后一条语句中，您可以清楚地看到，quad方案的第一个颜色变体将用作background-color属性的值。 太酷了吧？
And here is the compiled output:
这是编译后的输出：
div { /* ... etc... */ border-color: #ff00ff; color: #ff8000; background-color: #007fff; }See the Pen xwxmeP by SitePoint (@SitePoint) on CodePen.
请参阅CodePen上的SitePoint( @SitePoint )提供的Pen xwxmeP 。
In this section, I’ll show you how to create different types of color palettes. For that purpose, I’ll use Less-specific loops and conditional statements (mixin guards). If you’re not familiar with those constructs, you can take a quick look at my previous articles on these topics.
在本节中，我将向您展示如何创建不同类型的调色板。 为此，我将使用不太特定的循环和条件语句(mixin防护)。 如果你不熟悉这些构造，您可以快速浏览一下我以前的 文章就这些议题。
In the first example, I’ll create a mixin that produces a color table. You’ve used a color picker, right? So, you know what I mean.
在第一个示例中，我将创建一个生成颜色表的mixin。 您使用了拾色器，对吗？ 所以，你知道我的意思。
.color-palette(@color, @swatches, @step, @index: 0) when (@index =< (@swatches - 1)) { .swatch-@{index} { background-color: spin(@color, (@index * @step)); } .color-palette(@color, @swatches, @step, (@index + 1)); } .color-palette(#ff0000, 25, 15);The .color-palette() mixin takes three actual arguments. The first one defines the base color for the palette. The second one defines how many swatches to generate. And the third one sets the spin step needed for the spin() function.
.color-palette()混合使用三个实际参数。 第一个定义调色板的基本颜色。 第二个定义了要生成多少个样本。 第三个设置了spin()函数所需的旋转步骤。
Actually, there is one more argument: @index. But it’s used only internally to make the loop work. As it’s set in the code above, the loop will iterate 25 times through the code, creating 25 CSS classes – one for each swatch. Each class name will be constructed following the .swatch-[number] pattern (for example, .swatch-1).
实际上，还有一个参数： @index 。 但是它仅在内部用于使循环起作用。 正如上面代码中所设置的那样，循环将遍历代码25次，从而创建25个CSS类-每个色板一个。 每个类名都将按照.swatch-[number]模式构建(例如.swatch-1 )。
The color for each swatch is generated by using the value derived from the multiplication of the current index by the spin step. That value is added to the base color’s value for each iteration of the loop. This produces the full color spectrum, beginning and ending with the same color (red, in our case).
通过使用从当前索引乘以旋转步骤所得的值来生成每个样本的颜色。 对于循环的每次迭代，该值都会添加到基础颜色的值中。 这将产生全光谱，以相同的颜色(在我们的例子中为红色)开始和结束。
Here is the compiled output:
这是编译后的输出：
.swatch-0 { background-color: #ff0000; } .swatch-1 { background-color: #ff4000; } /* ...etc... */ .swatch-23 { background-color: #ff0040; } .swatch-24 { background-color: #ff0000; }See the Pen Generating a Color Palette with Less by SitePoint (@SitePoint) on CodePen.
见笔生成一个调色板以更少的由SitePoint( @SitePoint上) CodePen 。
This mixin can be used to create any kind of color table – with any number of swatches, and with a bigger or smaller spin step. For example, you can generate only four swatches with a spin step of 90 degrees, which will produce swatches for a square color scheme. You have endless possibilities. Just go ahead and do your own experiments.
此mixin可用于创建任何种类的色表-具有任何数量的色板，以及具有较大或较小的旋转步骤。 例如，您只能生成四个带有90度旋转步长的色板，这将为方形配色方案生成色板。 您拥有无限的可能性。 继续进行您自己的实验。
In the next example, we’ll create a mixin that produces tints and shades of a particular color. According to Wikipedia:
在下一个示例中，我们将创建一个混合器，以产生特定颜色的色调和阴影。 根据维基百科 ：
a tint is the mixture of a color with white, which increases lightness, and a shade is the mixture of a color with black, which reduces lightness.
色调是颜色与白色的混合，可以增加亮度，而阴影是颜色与黑色的混合，可以降低亮度。
As we’ll see in a minute, tints and shades can be easily created with the help of Less’s lighten() and darken() built-in functions.
稍后我们将看到，借助Less的lighten()和darken()内置函数可以轻松创建色调和阴影。
.color-palette(@type, @color, @index: 0) when (@index =< 9) { & when (@type = 'tints') { .swatch-@{index} { background-color: lighten(@color, (@index * 10%), relative); } } & when (@type = 'shades') { .swatch-@{index} { background-color: darken(@color, (@index * 10%), relative); } } .color-palette(@type, @color, (@index + 1)); } .color-palette('shades', #ff00ff);This version of the .color-palette() mixin takes two actual arguments – the type of the palette (shades or tints), and the base color. To make possible switching between shades and tints, the & operator is used in conjunction with the when keyword. This means that if we use “shades” as the first parameter, the code with the darken() function will be used.
此版本的.color-palette() mixin接受两个实际参数-调色板的类型(阴影或色调)和基色。 为了使色调和色调之间可以进行切换，将&运算符与when关键字结合使用。 这意味着，如果我们将“ shades”用作第一个参数，则将使用带有darken()函数的代码。
The background color in both cases is generated by the lighten() or darken() function, respectively, which uses the defined base color and the current index multiplied by ten percent. Pay attention to the relative parameter. It’s important to include it so the adjustment is relative to the current value.
两种情况下的背景色分别由lighten()或darken()函数生成，该函数使用定义的基色和当前索引乘以百分之十。 注意relative参数。 包含它很重要，这样调整是相对于当前值的。
Note: Don’t worry that the two mixins share one and the same name. Thanks to the pattern-matching feature, Less will know which one to use.
注意：不用担心两个mixins共享一个相同的名称。 得益于模式匹配功能，Less可以知道要使用哪一个。
Here is the compiled output:
这是编译后的输出：
.swatch-0 { background-color: #ff00ff; } .swatch-1 { background-color: #e600e5; } /* ...etc... */ .swatch-9 { background-color: #190019; }See the Pen Generating a Color Swatch with Less by SitePoint (@SitePoint) on CodePen.
请参见在CodePen上使用SitePoint ( @SitePoint ) 更少的笔生成颜色样本 。
There are many other things you can do with colors and with the great number of color functions provided by Less. But hey, you don’t want a 10,000-word tutorial, right? The given examples are enough to get you started and to give you an overview of the available possibilities. It’s up to you to dive deeper and continue experimenting. Happy Less coding!
您可以使用颜色以及Less提供的大量颜色功能来完成许多其他事情。 但是，嘿，您不想要10,000字的教程，对吗？ 给出的示例足以使您入门，并概述了可用的可能性。 由您决定要深入研究并继续尝试。 快乐少编码！
翻译自: https://www.sitepoint.com/color-alchemy-with-less-creating-color-schemes-and-palettes/
flash炼金术和混淆
相关资源：jdk-8u281-windows-x64.exe