sass 循环_使用CodePen学习Sass，第7部分：循环

sass 循环

Unlike scripting languages such as JavaScript and PHP, vanilla CSS cannot loop back on itself. The lack of this feature often means that portions of your site stylesheets must be written out in long, tedious routines that force you to cut, paste, and alter CSS declarations, only to have to change them all again when a detail in the markup or CSS changes.

与JavaScript和PHP等脚本语言不同，香草CSS不能自行循环播放。 缺少此功能通常意味着必须用冗长而繁琐的例程来编写网站样式表的某些部分，这些例程会迫使您剪切，粘贴和更改CSS声明，而仅当在标记或CSS更改。

Thankfully, Sass does have loops, which can generate a great number of lines in your stylesheet almost instantly.

值得庆幸的是，Sass 确实具有循环，可以几乎立即在样式表中生成大量行。

循环语法 (Loop Syntax)

Sass loops are part of the scripting language’s “control directives”. A Sass for loop is very similar to a for loop in JavaScript:

Sass循环是脚本语言的“控制指令”的一部分。 Sass for循环与JavaScript中的for循环非常相似：

@for $i from $n to $p {
    // do something
}

The first variable, $i is an incrementor: it keeps track of how many times the loop has run through. The second and third variables are the start and end values of the loop. The incrementor must always be a variable, but the start and end values can be hard-coded:

第一个变量$i是一个增量器 ：它跟踪循环运行了多少次。 第二和第三个变量是循环的开始和结束值。 增量器必须始终是一个变量，但是起始值和结束值可以是硬编码的：

@for $i from 1 to 4 {
    // do something
}

Alternatively, you could the through syntax:

或者，您可以through语法：

@for $i from 1 through 4 {
    // do something
}

The difference between the two is subtle, but important: in the to syntax, the loop will give up as soon as it hits the final number, whereas through will do just as the name indicates, proceeding though for the final loop.

两者之间的区别是微妙的，但很重要：在to语法中，循环将在到达最终数字后立即放弃，而through将按照名称指示进行，直到最后循环为止。

执行： (To execution:)

At the top of the loop: “What’s the value of $i? Is it less than 4? It is? Then I’ll keep going. Wait, now it’s 4. I have to stop, I can’t go through the loop again”

在循环的顶部：“ $i的值是多少？ 小于4吗？ 它是？ 那我继续走 等一下， 现在是4点。我必须停下来，我无法再经历循环了。”

通过执行： (Through execution:)

“What’s the value of $i? Is it equal to 4? Not yet? In that case, I’ll keep going. Oh, now it’s 4? Okay, I’ll do this loop one more time, then finish.”

“ $i的价值是多少？ 等于4吗？ 还没？ 在那种情况下，我会继续前进。 哦， 现在是4点？ 好的，我将再执行一次此循环，然后结束。”

使用循环：阅读彩虹 (Using Loops: A Reading Rainbow)

An obvious use of loops is to create nth-child selectors in CSS. Let’s say we wanted to create a rainbow effect in a navigation bar, with each link having a different background color. (Note that this is strongly inadvisable from a design perspective: we’re simply using it here as an exercise.)

循环的一个明显用途是在CSS中创建nth-child选择器。 假设我们要在导航栏中创建彩虹效果，每个链接的背景颜色都不同。 (请注意，从设计角度来看，这是绝对不可取的：我们只是在这里使用它作为练习。)

While there are many ways to achieve this, let’s say we want to use Sass. Create a new pen at CodePen, and in the HTML pane write:

尽管有很多方法可以实现这一目标，但是我们想使用Sass。 在CodePen创建一个新笔，然后在HTML窗格中编写：

nav>a[href="#"]*5

…and immediately press the TAB key, then fill in the text for each link. The result might look like this:

…并立即按TAB键，然后为每个链接填写文本。 结果可能如下所示：

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Book</a>
  <a href="#">Classes</a>
  <a href="#">Resources</a>
</nav>

Make sure the CSS pane is set to accept Sass, then write the following:

确保将CSS窗格设置为接受Sass，然后编写以下代码：

nav { 
	display: flex;
    a { 
    	    flex: 1;
    	    text-align: center;
    	    padding: 1rem;
    }
}

This ensures that each link takes up the same amount of space. Go ahead and customize the appearance of the links however you wish; I’ll concentrate on the backgrounds here.

这样可以确保每个链接占用相同的空间量。 继续并根据需要自定义链接的外观； 我将在这里集中介绍背景。

We want the background color of each link to proceed in order around the HSL color wheel, so I’ll change the Sass code to the following:

我们希望每个链接的背景色围绕HSL色轮依次进行，因此我将Sass代码更改为以下内容：

nav {
    display: flex;
    a {
        flex: 1;
        text-align: center;
        padding: 1rem;
        @for $i from 1 through 5 {
            $rot: $i * 72;
             &:nth-child(#{$i}) { 
                background: hsl($rot, 100%, 50%);
                }
          }
    }
}

It’s easy to see the effect of the to and through keywords in this example: try changing them in the supplied pen to see the difference.

在此示例中，很容易看到to和through关键字的效果：尝试在提供的笔中更改它们以查看区别。

The Sass generates:

Sass生成：

nav a:nth-child(1) { 
    background: hsl(72, 100%, 50%); 
}
nav a:nth-child(2) {
    background: hsl(144, 100%, 50%);
}

The result looks like this:

结果看起来像这样：

Home 主页 About 关于 Books 书籍 Classes 课程 Resources 资源

Aside from changing aspects of the loop and looking at the results directly in the CodePen preview pane, the easiest way to understand what’s going on is to see the complete generated CSS code. Click Share and choose the Export option at CodePen to download a complete copy of the files for yourself.

除了更改循环的各个方面并直接在CodePen预览窗格中查看结果之外，了解正在发生的事情的最简单方法是查看完整的生成CSS代码。 单击“ 共享”，然后在CodePen中选择“ 导出”选项，以自己下载文件的完整副本。

注意 (Note)

The relationship between HTML and CSS is a one-way street: CSS can influence the appearance of HTML, but HTML can’t inform CSS. This means that CSS can’t ever be “aware” of the number of elements on a page, and can’t count them: that’s a job for JavaScript. So when writing loops in a preprocessor, the developer has to know how many child elements there are to write styles for on the page; Sass cannot.

HTML和CSS之间的关系是一条单向的路：CSS可以影响HTML的外观，但是HTML不能通知CSS。 这意味着CSS永远无法“意识到”页面上的元素数量，也无法对其进行计数：这是JavaScript的工作。 因此，在预处理器中编写循环时， 开发人员必须知道要在页面上编写样式的子元素个数。 萨斯不能。

As you can see, using loop can generate a lot of CSS very quickly, making it extremely useful in developing stylesheets.

如您所见，使用循环可以非常快速地生成大量CSS，这在开发样式表中非常有用。

Because it is very similar to other for control structures, it’s very easy for beginners to forget to place the required @ symbol at the start of Sass control directives. A possible way to remember to do so is to recall that Sass may be “superpowered CSS”, but it must still respect its origins: a word at the start of any line in CSS is assumed to be a selector, and for is already an accessibility attribute that could be used in a selector, so we can’t use that. Using @ “protects” the for directive from CSS misinterpretation.

因为它非常类似于其他for控制结构，这是非常方便初学者忘记将所需的@符号在萨斯控制指令的开始。 记住这样做的一种可能方法是，回顾Sass可能是“超强CSS”，但它仍必须尊重其起源：假定CSS中任何行开头的单词都是选择器，并且for已经是可以在选择器中使用的accessibility属性，因此我们不能使用它。 使用@ “保护” for指令可避免CSS错误解释。

There are a number of new features in this example, including the use of Sass math and “echoing” variable values directly in CSS code. I’ll explore both of those in more detail, together with more variations of Sass loops, such as @each and @while, in future articles.

此示例中有许多新功能，包括使用Sass数学和直接在CSS代码中“回显”变量值。 我将在以后的文章中更详细地探讨这两个方面，以及Sass循环的更多变体，例如@each和@while 。

Like nesting, it is very easy for poorly-written loops to produce out-of-control CSS. In theory, you could create a near-infinite Sass loop that would endlessly produce lines of CSS code. Take care in what you’re doing, and always inspect the final CSS output.

像嵌套一样，写得不好的循环很容易产生失控CSS。 从理论上讲，您可以创建一个几乎无限的Sass循环，该循环将不断产生CSS代码行。 请注意您的工作，并始终检查最终CSS输出 。

翻译自: https://thenewcode.com/988/Learning-Sass-with-CodePen-Part-7-Loops

sass 循环