mysql游标少循环

In the previous article we learned the basics of the Less mixin guards and loops. We saw that once we’ve gained a clear understanding of their structure we can use them properly. Now, we’ll explore how this knowledge can be put to practice by examining some real world examples.

在上一篇文章中，我们了解了Less mixin保护和循环的基础。 我们看到，一旦对它们的结构有了清楚的了解，就可以正确使用它们。 现在，我们将通过研究一些实际示例来探索如何将这些知识付诸实践。

创建警报框 (Creating Alert Boxes)

The first example is to create an alert box with four variations. We’ll create a mixin guard that transforms a regular div into a differently styled alert box – depending on the argument (the type of alert box) we pass to the mixin. First, we need to define some variables:

第一个示例是创建具有四个变体的警报框。 我们将创建一个mixin防护，将常规div转换为样式不同的警报框-取决于传递给mixin的参数(警报框的类型)。 首先，我们需要定义一些变量：

@color_info: #00a8e6;
@color_success: #8cc14c;
@color_warning: #faa732;
@color_error: #da314b;

These are four color variables, which we’re going to use for the four variants of our alert box. Now, let’s add the needed mixin guards:

这是四个颜色变量，我们将在警报框的四个变体中使用它们。 现在，让我们添加所需的mixin防护：

.alert(@mode) when (@mode = 'info'){
background-color: @color_info;
border: thin solid darken(@color_info, 15%);
}
...
.alert(@mode) {
width: 300px;
padding: 25px;
color: #fff;
text-shadow: 0.5px 0.5px #000;
}

The first part of the above code creates a conditional statement, which, if the @mode parameter is equal to "info", will use the @color_info variable to set both the background color of the alert box and the color for its border. We use the darken() function to make the border color 15% darker than the background color.

上面的代码的第一部分创建了一个条件语句，如果@mode参数等于“ info”，则该条件语句将使用@color_info变量设置警报框的背景颜色及其边框的颜色。 我们使用darken()函数使边框颜色比背景颜色深15％。

We need to repeat the same pattern for the rest three variants. We do that by copying and pasting the first variant. For each variant we use the appropriate color variable and change the word "info" to "success", "warning", and "error" respectively.

对于其余三个变体，我们需要重复相同的模式。 我们通过复制和粘贴第一个变体来做到这一点。 对于每种变体，我们使用适当的颜色变量，并将单词“ info”分别更改为“ success”，“ warning”和“ error”。

Finally, at the end, we put the styles that are common for all alert boxes. We set the text color to white and apply a subtle text shadow effect to it for better contrast.

最后，最后，我们放置所有警报框通用的样式。 我们将文本颜色设置为白色，并对它应用微妙的文本阴影效果以获得更好的对比度。

Now, to use the mixin we need to put it like so .alert('success'), inside a CSS rule for the div. Et voila. We can see a nice alert box with green background.

现在，要使用mixin，我们需要将它像.alert('success')这样.alert('success') divCSS规则中。 等等 。 我们可以看到一个带有绿色背景的漂亮警报框。

Depending on our needs, we can use different colors for our alert boxes – by changing the values of the color variables – and still keeping the mixin semantic.

根据我们的需要，我们可以为警报框使用不同的颜色-通过更改颜色变量的值-并仍然保留mixin语义。

See the Pen Mastering Less Guards and Loops #1 by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上SitePoint ( @SitePoint ) 编写的Pen Mastering Less Guards and Loops＃1 。

创建响应式网格 (Creating Responsive Grids)

One of the most valuable uses of Less loops is for creating a responsive grid system. Let’s see how this can be done. Let’s explore the following code:

Less循环最有价值的用途之一是创建响应式网格系统。 让我们看看如何做到这一点。 让我们探索以下代码：

@breakpoint-small : 480px;
@breakpoint-medium: 768px;
@breakpoint-large : 960px;
.grid(@breakpoint; @columns; @index: 1) when (@index =< @columns) {
.col-@{breakpoint}-1-@{index} {
width: 100% / @index;
}
.grid(breakpoint; @columns; (@index + 1));
}

First, we have set three variables for different breakpoints. Then, we create the actual mixin. To output the needed CSS classes, we need two things – the breakpoint and the number of the columns for our grid. We set those as parameters in our mixin. Next, we create the pattern for the CSS rule. We want a pattern that tells us the actual width of a column.

首先，我们为不同的断点设置了三个变量。 然后，我们创建实际的mixin。 要输出所需CSS类，我们需要两件事–断点和网格的列数。 我们将这些设置为我们的mixin中的参数。 接下来，我们为CSS规则创建模式。 我们需要一种模式来告诉我们列的实际宽度。

Many frameworks define a column width by using the number of default columns (most often there are 12 default columns) that span. For example, for creating three equal columns they use .col-4 class for each column. But this can be confusing and not a sensible naming convention. It looks like they may want to create four columns instead of one. So, we’ll use a different approach, which I consider more natural. We’ll define our columns like this: col-1-3. This tell us that the column width is one third of the container’s width, which makes much more sense, at least for me.

许多框架通过使用跨越的默认列数(通常有12个默认列)来定义列宽。 例如，要创建三个相等的列，它们对每个列使用.col-4类。 但这可能会造成混淆，而不是明智的命名约定。 看起来他们可能想要创建四列而不是一列。 因此，我们将使用另一种方法，我认为这种方法更自然。 我们将定义这样的列： col-1-3 。 这告诉我们列宽是容器宽度的三分之一，这更有意义，至少对我而言。

To apply this pattern in our mixin, we just need to use the @screen_size and the @index variables, and also, to divide the @index by 100% for the width property. Lastly, we add the mixin itself, which will increment the @index by 1.

要在我们的mixin中应用此模式，我们只需要使用@screen_size和@index变量，并且还要将width属性的@index除以100％。 最后，我们添加mixin本身，这将使@index增加1。

And now, let’s see how easy we can create different CSS classes for our grid:

现在，让我们看看为网格创建不同CSS类有多么容易：

.grid(all, 4);
@media only screen and (min-width: @breakpoint-small) {
.grid(small, 4);
}
@media only screen and (min-width: @breakpoint-medium) {
.grid(medium, 4);
}
@media only screen and (min-width: @breakpoint-large) {
.grid(large, 4);
}

The first appearance of the .grid() mixin creates column classes applicable for all screen sizes. In the next three, we use media queries to generate column classes for our small, medium and large breakpoints. Let’s check the compiled output:

.grid() mixin的首次出现会创建适用于all屏幕尺寸的列类。 在接下来的三个中，我们使用媒体查询为small ， medium和large断点生成列类。 让我们检查编译后的输出：

.col-all-1-1 {
width: 100%;
}
.col-all-1-2 {
width: 50%;
}
.col-all-1-3 {
width: 33.33333333%;
}
.col-all-1-4 {
width: 25%;
}
@media only screen and (min-width: 480px) {
.col-small-1-1 {
width: 100%;
}
...
}
@media only screen and (min-width: 768px) {
.col-medium-1-1 {
width: 100%;
}
...
}
@media only screen and (min-width: 960px) {
.col-large-1-1 {
width: 100%;
}
...
}

Nice and useful CSS classes created on the fly. Thanks Less.

动态创建的漂亮而有用CSS类。 谢谢少。

为您的Sprite图片生成CSS (Generating CSS for Your Sprite Images)

Imagine that we have a nice sprite image, which contains many icons. To make this sprite work, we need to write a lot of CSS – a separate rule for each icon, with the icons name and different background position. Doing this manually can be time consuming, especially if the image contains too many icons. In such a case, a Less loop is the ideal candidate for the job. Let’s explore how to create it:

想象一下，我们有一个漂亮的精灵图像，其中包含许多图标。 为了使此精灵有效，我们需要编写大量CSS –每个图标都有单独的规则，并带有图标名称和不同的背景位置。 手动执行此操作可能很耗时，尤其是在图像包含太多图标的情况下。 在这种情况下，Less循环是该工作的理想人选。 让我们探讨如何创建它：

@icons: tag flag filter sort sort-asc sort-desc;
.sprites(@length; @index: 1) when (@index =< @length) {
@name: extract(@icons, @index);
.icon-@{name} {
background-position: 0 (@index * 32px);
}
.sprites(@length; (@index + 1));
}
.sprites(length(@icons));

We create the mixin with parameter @length, and @index set to 1. Then, we instruct the loop to iterate until the @index is equal to or lesser than the list’s length. Inside the loop’s body, we use the extract() function to get the name for each individual icon. Next, we create the desired CSS rule by using the @name and @index variables. And finally, we put the mixin itself to make the loop working.

我们使用参数@length和@index设置为1来创建mixin。然后，指示循环进行迭代，直到@index等于或小于列表的长度。 在循环体内，我们使用extract()函数获取每个图标的名称。 接下来，我们使用@name和@index变量创建所需CSS规则。 最后，我们将mixin本身放入循环中。

Now, the only effort required from us is to put the names of the icons in a list, which the loop will use – as this is done in the first line of the above code.

现在，我们唯一需要做的就是将图标的名称放在一个列表中，循环将使用该列表–这是在上面代码的第一行中完成的。

To use the mixin, we just need to provide the length of the list, which we easily do by using the length() function. We don’t want to count the number of icons manually, right? :)

要使用mixin，我们只需要提供列表的长度即可，我们可以使用length()函数轻松地做到这一点。 我们不想手动计算图标的数量，对吗？ :)

And here is the code generated by our mixin:

这是我们的mixin生成的代码：

.icon-tag {
background-position: 0 32px;
}
.icon-flag {
background-position: 0 64px;
}
...
}
.icon-sort-desc {
background-position: 0 192px;
}

摘要 (Summary)

I hope you’ve enjoyed the examples and have found them useful. Lots of things can be done with Less mixins and guards, and this article only scratches the surface. You now, hopefully, know the basic scheme and should be able to confidently experiment with your own ideas.

希望您喜欢这些示例并发现它们有用。 使用更少的mixin和Guards可以完成很多事情，并且本文仅涉及表面内容。 希望您现在了解基本方案，并且应该能够自信地尝试自己的想法。

翻译自: https://www.sitepoint.com/mastering-less-guards-and-loops/

mysql游标少循环