CSS预处理器中的循环,预处理器中的循环

CSS 预处理器中的循环

2017/04/13 · CSS ·
CSS,
预处理器

本文由 伯乐在线 –
叙帝利
翻译,黄利民
校稿。未经许可,禁止转发!
英文出处:css-tricks。欢迎参预翻译组。

比方你看过老的科幻电影,你势必知道循环的无敌之处。给您的机器人克星设置极端循环,它就会放炮,然后机器人灰飞烟灭了。

预处理器的巡回并不会在满天中发生猛烈爆炸(作者期望),但是它有利于书写 DRY
CSS(译者注:详细介绍可以参照那篇作品
 )。各个人在谈论形式库以及模块化设计的时候,大多数人的关切点是
CSS 选取器。无论你利用哪个种类方式的选取器(BEM、OOCSS、SMACSS
等等),循环可以使设计方式易读并且可爱慕,直接编译到代码中。

大家先看一看循环能做哪些,以及在主流的 CSS
预处理器(Sass,
Less,Stylus
)中怎么着利用。各个语言都有非凡的语法,不过末了的机能是一样的。有七种艺术制作
一只循环走动的猫

See the Pen Walkcycle with music
loop by Rachel Nabors
(@rachelnabors) on
CodePen.

PostCSS
也很盛行,但是自身并不曾语法。即使它被称为后电脑,但自己爱不释手称它为
meta-preprocessor。PostCSS
允许书写并分享您本身的预处理器语法。假如你愿意,你可以在 PostCSS 中重写
Sass 或然 Less,然则
早已有人在你此前那样做了

本文由 nzbin
翻译,黄利民
校稿。未经许可,禁止转发!

英文出处:Loops in
CSS Preprocessors

data-rel=”content”>发布地址:

预处理器循环不会在空中中挑起激烈的爆裂(小编盼望),但它们对于编写DRY
CSS卓殊管用。
固然我们都在切磋的样式库和模块化设计,一大半第一一贯在CSS选取器那上头。
不管你挑选什么样的缩写格局(BEM,OOCSS,SMACSS,ETC),循环可以接济维持你的体裁更具可读性和可维护性,直接加工到您的代码中。

预处理器循环不会在半空中引起热烈的爆炸(小编期望),但它们对于编写DRY
CSS卓殊实用。
即使大家都在座谈的样式库和模块化设计,大多数第一一向在CSS采取器这地点。
不管你接纳怎样的缩写格局(BEM,OOCSS,SMACSS,ETC),循环可以扶持维持您的体制更具可读性和可维护性,间接加工到你的代码中。

循环条件

星际迷航并非完全虚构。如果你不小心,无限循环只怕会使编译器变得卡顿只怕损坏编译器。固然那不是消灭邪恶机器人的好法子,但是它会负气使用你代码的人。所以循环的利用是有限度的——寻常是由一些递增的循环体大概目标集合定义。在编程术语中:

  1. While
    循环是通用的,循环一直运转直到满足条件。请小心!那里不难并发极端循环。
  2. For 循环是雨后春笋的,运行特定数量的循环体。
  3. For-Each 循环遍历集合或许列表,每一回循环一项。

上述循环的使用限制依次递减。for-each 循环是 for 循环的一种样式,
它们也是 while
循环的一种形式。不过半数以上的行使景况或许要求更有血有肉的归类。作者很难在事实上工作中找到
while 循环——超过一半例证使用 for 或者 for-each 处理的更好。所以
Stylus 只提供了后者的语法。Sass 的语法则提供了这三种方式,而 Less
并不曾循环语法——但那并不会妨碍我们!发轫吧。“

万一你看过老的科幻电影,你肯定知道循环的兵不血刃之处。给您的机器人克星设置极端循环,它就会爆炸,然后机器人灰飞烟灭了。

咱俩将看看循环可以做什么样,以及哪些在重大的CSS预处理器中运用它们:Sass,Less和Stylus。
每一个语言都提供了一种新鲜的语法,但他俩都形成了办事。
有不止一种情势来循环一只猫。

大家将看看循环可以做怎样,以及哪些在首要的CSS预处理器中行使它们:Sass,Less和Stylus。
每个语言都提供了一种特有的语法,但她俩都做到了劳作。
有不止一种方法来循环一只猫。

遍历集合的 ``for-each 循环

当有一个档次汇聚(列表或许数组)的时候,预处理器的循环是极度管用的——比如一组社交媒体图标和颜色,只怕一列意况修饰符(success,
warning, error, 等)。因为 for-each
循环自个儿就是处理项目会聚,它是最可相信并最不难领会的大循环。

我们经过巡回一个简易的颜色列表来探视它是什么样行事的。

Sass 中,大家将应用 @each
指令(@each $item in $list)来赢得颜色:

See the Pen Sass ForEach
List by Miriam Suzanne
(@mirisuzanne) on
CodePen.

Stylus 中,使用 for 语法(for item in list)处理集合:

See the Pen Stylus ForEach
List by Miriam Suzanne
(@mirisuzanne) on
CodePen.

Less并没有提供循环的语法,可是大家可以利用递归(recursion)来取代。递归就是调用自家的函数可能mixin 。在 Less 中,大家利用 mixins 完成递归:

.recursion() { /* an infinite recursive loop! */ .recursion(); }

1
2
3
4
.recursion() {
  /* an infinite recursive loop! */
  .recursion();
}

如今我们向 mixins 中添加 when 关键字,有限援救循环能够告一段落。

.recursion() when (@conditions) { /* a conditional recursive “while”
loop! */ .recursion(); }

1
2
3
4
.recursion() when (@conditions) {
  /* a conditional recursive "while" loop! */
  .recursion();
}

大家能够如此创造 for 循环,添加一个从 1
初阶的计数器(@i),然后依次递增(@i + 1),直到满意条件停止(@i <= length(@list)),其中
length(@list)
表示项目汇聚的总和。假如每两次巡回提取下一个列表项,大家将手动制造
for-each 循环:

See the Pen Less ForEach
List by Miriam Suzanne
(@mirisuzanne) on
CodePen.

在 Less
中,你做每件事都会碰着困难(原文评论中有无数人指出了反对意见)。那是它的风味。

预处理器的大循环并不会在高空中生出激烈爆炸(我梦想),可是它便宜书写
DRY CSS(译者注:详细介绍可以参考那篇小说
)。各个人在切磋方式库以及模块化设计的时候,半数以上人的关心点是
CSS 拔取器。无论你采用哪个种类情势的选取器(BEM、OOCSS、SMACSS
等等),循环可以使设计方式易读并且可保证,直接编译到代码中。

PostCSS也很受欢迎,但它不提供它自身的其余语法。
即使它有时被喻为后电脑,作者叫作元预处理器。
PostCSS允许你编写和共享本人的预处理器语法。
若是你想,你可以重写Sass或Less在PostCSS,但有人曾经先行一步了。

PostCSS也很受欢迎,但它不提供它本人的任何语法。
固然它有时被叫做后电脑,我称之为元预处理器。
PostCSS允许你编写和共享自身的预处理器语法。
如若你想,你能够重写Sass或Less在PostCSS,但有人一度先行一步了。

交际媒体按钮

遍历列表很有用,不过众多时候你想遍历对象。一个惯常的例证就是给张罗媒体按钮添加不一致的颜料和图标。对于列表中的每一项,我们须要应酬网络的名目以及品牌颜色。

$social: ( ‘facebook’: #3b5999, ‘twitter’: #55acee, ‘linkedin’:
#0077B5, ‘google’: #dd4b39, );

1
2
3
4
5
6
$social: (
  ‘facebook’: #3b5999,
  ‘twitter’: #55acee,
  ‘linkedin’: #0077B5,
  ‘google’: #dd4b39,
);

比方运用 Sass,大家得以选拔语法 @each $key, $value in $array
来获取 key 值(网站名称)和 value 值(品牌颜色)。以下是整套的巡回:

See the Pen Sass Social Media
Loop by Miriam Suzanne
(@mirisuzanne) on
CodePen.

Stylus 有雷同的语法:for key, value in array

See the Pen Stylus Social Media
Loop by Miriam Suzanne
(@mirisuzanne) on
CodePen.

Less 中,大家亟须手动提取每一对值:

See the Pen LESS Social Media
Loop by Miriam Suzanne
(@mirisuzanne) on
CodePen.

我们先看一看循环能做哪些,以及在主流的 CSS
预处理器(Sass,
Less,Stylus
)中哪些选取。每个语言都有特其余语法,但是最后的效能是同一的。有种种措施制作
一只循环走动的猫

循环条件

最为循环是一件很可怕的事体。
若是您不小心,无限循环恐怕会放慢或让你的编译器崩溃。
那就是干什么循环应该总是提供限制条件的目标 ——
经常由七个增量重复或对象集合定义。

巡回条件

星际迷航中的循环没有完全错误。
尽管你不小心,无限循环可能会减慢或让您的编译器崩溃。
即使那不是一个来化解邪恶的机器人很好的格局,它会负气任何利用你代码的人。
那就是怎么循环应该总是提供简单的目的 –
经常由三个增量重复或对象集合定义。

递增的 for 循环

See the Pen Walkcycle with music
loop by Rachel Nabors
(@rachelnabors) on
CodePen.

在编程术语中:
  • while循环是通用的,并且在知足任何条件时将维持循环。 小心!
    那是极致循环最或然的地点。
  • For循环是增量式的,对于特定数量的再度运行。
  • For-Each循环遍历集合或列表,一次一个地遍历每一种门类。
    每体系型的循环比后边更细粒度。
    一个for-each巡回只是一种for巡回,那也是一种while巡回。
    可是大部分的用例都属于更切实的档次。
    作者很难在任何规格下搜寻真正的while循环 ——
    一大半例证可以更好地拍卖forfor-each
    那可能是怎么Stylus只提供后者的语法。
    Sass为三种循环格局都提供了新鲜的语法,Less在技术上根本未曾循环语法 –
    但那不会阻碍大家! 让我们深刻研讨一下。
在编程术语中:
  • while循环是通用的,并且在满意任何条件时将维持循环。 小心!
    这是无与伦比循环最大概的地点。
  • For循环是增量式的,对于特定数量的双重运行。
  • For-Each循环遍历集合或列表,五次一个地遍历每一种项目。

Each type of loop is more narrowly focussed than the previous. A
for-each loop is just one type of for loop, which is one type of while
loop. But most of your use-cases will fall into the more specific
categories. I had trouble finding true while loops in the wild — most
examples could have been handled better with for or for-each. That’s
probably why Stylus only provides syntax for the latter. Sass provides
unique syntax for all three, and Less doesn’t technically have looping
syntax at all — but that won’t stop us! Let’s dive in.

For
循环能够运作任意数量的循环体,并不囿于于对象的长度。你大概会采纳它创设一个栅格系统(for columns from 1 through 12),遍历色轮(for hue from 1 through 360)只怕使用
nth-childCSS预处理器中的循环,预处理器中的循环。 给 div 编号并扭转内容。

让我们遍历 36 个 div 成分,使用 :nth-child 给每一项添加编号及背景观。

Sass 提供了一个特出的 for
循环语法:@for $count from $start through $finish,其中 $start
$finish 都以整数。如若发轫值大于停止值,Sass
会递减循环而不是一日千里循环。

See the Pen Sass “for” loop
by Miriam Suzanne (@mirisuzanne) on
CodePen.

through 关键字表示循环包蕴数字 36 。你也得以运用 to
关键字,它不分包末了一个成分,只会循环 35
次:@for $i from 1 to 36 。

Stylus 也有一致的比比皆是的语法,不过 tothrough 必要替换成
... and .. 。“

See the Pen Stylus “for”
loop by Miriam Suzanne
(@mirisuzanne) on
CodePen.

Stylus 也提供了一个 range() 函数,可以变动递增的步数。使用
for hue in range(0, 360, 10) 可以每一趟以 10 的翻番递增。

Less 要求拔取递归 mixins 。我们得以创制一个迭代的参数(@i),使用
when (@i > 0) 条件甘休循环,每一回迭代减一,那样看起来像是递减的 for
循环。

See the Pen Less “for” loop
by Miriam Suzanne (@mirisuzanne) on
CodePen.

值得注意的是 CSS 也得以兑现 nth-child– 编号,不需求预处理器。可是CSS 并不曾循环结构,它提供了一个 counter() 方法,依据 DOM
的多寡递增,可以用来转移内容。然而在 content
属性之外使用是无用的,所以背景观并从未生成。

See the Pen CSS counter by
Miriam Suzanne (@mirisuzanne) on
CodePen.

(animation by Rachel Nabors) 

for-each循环

预处理器循环在你有要循环的项目(列表或数组)(如社交媒体图标和颜色数组)或气象修饰符列表(successwarningerror等)时最有用。
因为for-each巡回被绑定到已知的花色汇聚,它们往往是最具体和可驾驭的循环。
让大家从循环一个概括的水彩列表开首,看看它是咋做事的。
在Sass中,大家将使用@each指令(@each $item in $list)来拿到颜色:

<div class="darkslateblue"></div>
<div class="mediumorchid"></div>
<div class="seagreen"></div>
<div class="steelblue"></div>

scss:

// colors
$colors: darkslateblue mediumorchid seagreen steelblue;
// loop!
@each $color in $colors {
  .#{$color} {
    background: $color;
  }
}

// styles
body {
  display: flex;
}
div {
  flex: 1 1 auto;
  height: 100vh;
}

在Stylus中,语法(for item in list)处理集合:
HTML:

<div class="darkslateblue"></div>
<div class="mediumorchid"></div>
<div class="seagreen"></div>
<div class="steelblue"></div>

Stylus

HTML  Stylus  Result
EDIT ON
 // colors
colors = 'darkslateblue' 'mediumorchid' 'seagreen' 'steelblue'
// loop!
for color in colors
  {'.' + color}
    background: unquote(color)
// styles
body {
  display: flex;
}
div {
  flex: 1 1 auto;
  height: 100vh;
}
VIEW COMPILED RERUN

Less不提供循环语法,但我们可以利用递回来模拟它。
递归是当从其中调用函数或mixin中发生的。
在Less中,我们得以动用mixins进行递归:

.recursion() {
  /* an infinite recursive loop! */
  .recursion();
}

于今大家抬高一个guardmixin,以避免它可是循环。

.recursion() when (@conditions) { 
  /* a conditional recursive "while" loop! */
  .recursion();
}

一旦满意条件(@i <=
length(@list)),大家就足以透过充裕一个从1开端的计数器(@i) –
其中length(@list)将我们的循环迭代限制为与大家的汇集相同的尺寸。
假诺大家在历次传递中领到下一个列表项,大家将有一个手动的for-each循环:

<div class="darkslateblue"></div>
<div class="mediumorchid"></div>
<div class="seagreen"></div>
<div class="steelblue"></div>

 // colors
@colors: darkslateblue mediumorchid seagreen steelblue;

// loop definition
.backgrounds(@list, @i: 1) when (@i <= length(@list)) {
  // extract the right color from the list
  @color: extract(@list, @i);
  // apply the background to the selector
  .@{color} {
    background: @color;
  }
  // recursive call for the next color
  .backgrounds(@list, @i + 1);
}
// application
.backgrounds(@colors);
// styles
body {
  display: flex;
}

div {
  flex: 1 1 auto;
  height: 100vh;
}

亚洲必赢官网 1

背景颜色循环

可以看来在Less中落成那总体是很不方便的一种艺术。

for-each循环

预处理器循环在你有要循环的档次(列表或数组)(如社交媒体图标和颜色数组)或状态修饰符列表(successwarningerror等)时最有用。
因为for-each循环被绑定到已知的品种汇集,它们往往是最切实和可懂得的大循环。
让我们从循环一个粗略的颜色列表起初,看看它是怎样行事的。
在Sass中,我们将采取@each指令(@each $item in $list)来获取颜色:

<div class="darkslateblue"></div>
<div class="mediumorchid"></div>
<div class="seagreen"></div>
<div class="steelblue"></div>

scss:

// styles
body {
  display: flex;
}
div {
  flex: 1 1 auto;
  height: 100vh;
}

亚洲必赢官网 2

背景颜色循环

在Stylus中,语法(for item in list)处理集合:
HTML:

<div class="darkslateblue"></div>
<div class="mediumorchid"></div>
<div class="seagreen"></div>
<div class="steelblue"></div>

Stylus

HTML  Stylus  Result
EDIT ON
 // colors
colors = 'darkslateblue' 'mediumorchid' 'seagreen' 'steelblue'
// loop!
for color in colors
  {'.' + color}
    background: unquote(color)
// styles
body {
  display: flex;
}
div {
  flex: 1 1 auto;
  height: 100vh;
}
VIEW COMPILED RERUN

Less不提供循环语法,但大家得以应用递回来模拟它。
递归是当从里头调用函数或mixin中生出的。
在Less中,大家得以采取mixins举办递归:

.recursion() {
  /* an infinite recursive loop! */
  .recursion();
}

未来我们抬高一个guardmixin,以预防它极其循环。

.recursion() when (@conditions) { 
  /* a conditional recursive "while" loop! */
  .recursion();
}

假诺满意条件(@i <=
length(@list)),大家就足以经过抬高一个从1发端的计数器(@i) –
其中length(@list)将大家的循环迭代限制为与大家的汇聚相同的尺寸。
借使大家在历次传递中领到下一个列表项,大家将有一个手动的for-each循环:

<div class="darkslateblue"></div>
<div class="mediumorchid"></div>
<div class="seagreen"></div>
<div class="steelblue"></div>

 // colors
@colors: darkslateblue mediumorchid seagreen steelblue;

// loop definition
.backgrounds(@list, @i: 1) when (@i <= length(@list)) {
  // extract the right color from the list
  @color: extract(@list, @i);
  // apply the background to the selector
  .@{color} {
    background: @color;
  }
  // recursive call for the next color
  .backgrounds(@list, @i + 1);
}
// application
.backgrounds(@colors);
// styles
body {
  display: flex;
}

div {
  flex: 1 1 auto;
  height: 100vh;
}

在Less中已毕那整个是很不便的一种艺术。它颐神养性。

栅格系统

PostCSS
也很流行,但是小编并从未语法。它被称作后电脑,小编欣赏称它为
meta-preprocessor。PostCSS
允许书写并分享您自个儿的预处理器语法。如若你愿意,你可以在 PostCSS 中重写
Sass 只怕 Less,不过
早就有人在你此前那样做了。

社交媒体按钮

巡回遍历列表大概很有用,但更加多时候你想循环遍历对象。
一个大面积的例子是为社交媒体按钮分配差别的水彩和图标。
对于列表中的每一个门类,大家需求网站的称号和该社交互联网的品牌颜色:
SCSS:

$social: (
  'facebook': #3b5999,
  'twitter': #55acee,
  'linkedin': #0077B5,
  'google': #dd4b39,
);

使用Sass,大家可以应用语法@each $ key$value in $array访问每种对的键(互连网名称)和值(品牌颜色)。
那是一体化的循环:

HTML  SCSS  Result
EDIT ON
 <ul class="social">
  <li>
    <a href="http://www.facebook.com/me/">
      Facebook
    </a>
  </li>
  <li>
    <a href="http://www.twitter.com/me/">
      Twitter
    </a>
  </li>
  <li>
    <a href="http://www.linkedin.com/me/">
      LinkedIn
    </a>
  </li>
  <li>
    <a href="http://plus.google.com/me/">
      Google+
    </a>
  </li>
</ul>

SCSS

 // establish social media colors
$social: (
  'facebook': #3b5999,
  'twitter': #55acee,
  'linkedin': #0077B5,
  'google': #dd4b39,
);
// loop, to style social media links
@each $name, $color in $social {
  // selector based on href name
  [href*='#{$name}'] {
    background: $color;

    &::before {
      content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15542/#{$name}.png);
    }
  }
}
// styles
ul {
  margin: 0 auto;
  max-width: 30rem;
}
a {
  border: 4px solid black;
  border-radius: 6px;
  color: black;
  display: block;
  font-weight: bold;
  margin: 0.25rem;
  padding: 0.5rem;
  text-decoration: none;
  &::before {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.5em;
  }
}

Stylus 也有同等的语法:for key, value in array

<ul class="social">
<li><a href="http://www.facebook.com/me/">Facebook</a></li>
<li><a href="http://www.twitter.com/me/">Twitter</a></li>
<li><a href="http://www.linkedin.com/me/">LinkedIn</a></li>
<li><a href="http://plus.google.com/me/">Google+</a></li>
</ul>

Stylus:

// establish social media color
ssocial = {
'facebook': #3b5999,
'twitter': #55acee,
'linkedin': #0077B5,
'google': #dd4b39,
}
// loop, to style social media links
for name, color in social
// selector based on href name
  [href*={name}]
    background: color
    &::before
      content: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/15542/' + name + '.png')
// styles
ul {
  margin: 0 auto;
  max-width: 30rem;
}
a {
    border: 4px solid black;
    border-radius: 6px;
    color: black;
    display: block;
    font-weight: bold;margin: 0.25rem;
    padding: 0.5rem;
    text-decoration: none;
     &::before {
        display: inline-block;
        vertical-align: middle;
        margin: 0 0.5em;
     }
}

在Less中,我们务必手动提取对的每一边:
html

HTML  LESS  Result
EDIT ON
 <ul class="social">
  <li>
    <a href="http://www.facebook.com/me/">
      Facebook
    </a>
  </li>
  <li>
    <a href="http://www.twitter.com/me/">
      Twitter
    </a>
  </li>
  <li>
    <a href="http://www.linkedin.com/me/">
      LinkedIn
    </a>
  </li>
  <li>
    <a href="http://plus.google.com/me/">
      Google+
    </a>
  </li>
</ul>

LESS:

HTML  LESS  Result
EDIT ON
 // establish social media colors
@social:
  'facebook' #3b5999,
  'twitter' #55acee,
  'linkedin' #0077B5,
  'google' #dd4b39,
;

// for loop to iterate over array
.each(@array, @i: 1) when (@i <= length(@array)) {
  // extract social names and colors
  @pair: extract(@array, @i);
  @name: extract(@pair, 1);
  @color: extract(@pair, 2);

  // selector based on href name
  [href*='@{name}'] {
    background: @color;

    &::before {
      content: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/15542/@{name}.png');
    }
  }

  .each(@array, @i + 1);
}

// application
.each(@social);


// styles
ul {
  margin: 0 auto;
  max-width: 30rem;
}

a {
  border: 4px solid black;
  border-radius: 6px;
  color: black;
  display: block;
  font-weight: bold;
  margin: 0.25rem;
  padding: 0.5rem;
  text-decoration: none;

  &::before {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.5em;
  }
}

交际媒体按钮

巡回遍历列表恐怕很有用,但越多时候你想循环遍历对象。
一个广阔的例证是为张罗媒体按钮分配差其他颜料和图标。
对于列表中的各种品种,我们必要网站的名号和该社交互联网的品牌颜色:
SCSS:

$social: (
  'facebook': #3b5999,
  'twitter': #55acee,
  'linkedin': #0077B5,
  'google': #dd4b39,
);

使用Sass,大家可以使用语法@each $ key$value in $array做客每一种对的键(网络名称)和值(品牌颜色)。
那是完好的循环:

HTML  SCSS  Result
EDIT ON
 <ul class="social">
  <li>
    <a href="http://www.facebook.com/me/">
      Facebook
    </a>
  </li>
  <li>
    <a href="http://www.twitter.com/me/">
      Twitter
    </a>
  </li>
  <li>
    <a href="http://www.linkedin.com/me/">
      LinkedIn
    </a>
  </li>
  <li>
    <a href="http://plus.google.com/me/">
      Google+
    </a>
  </li>
</ul>

SCSS

 // establish social media colors
$social: (
  'facebook': #3b5999,
  'twitter': #55acee,
  'linkedin': #0077B5,
  'google': #dd4b39,
);
// loop, to style social media links
@each $name, $color in $social {
  // selector based on href name
  [href*='#{$name}'] {
    background: $color;

    &::before {
      content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15542/#{$name}.png);
    }
  }
}
// styles
ul {
  margin: 0 auto;
  max-width: 30rem;
}
a {
  border: 4px solid black;
  border-radius: 6px;
  color: black;
  display: block;
  font-weight: bold;
  margin: 0.25rem;
  padding: 0.5rem;
  text-decoration: none;
  &::before {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.5em;
  }
}

Stylus 也有同等的语法:for key, value in array

<ul class="social">
<li><a href="http://www.facebook.com/me/">Facebook</a></li>
<li><a href="http://www.twitter.com/me/">Twitter</a></li>
<li><a href="http://www.linkedin.com/me/">LinkedIn</a></li>
<li><a href="http://plus.google.com/me/">Google+</a></li>
</ul>

Stylus:

// establish social media color
ssocial = {
'facebook': #3b5999,
'twitter': #55acee,
'linkedin': #0077B5,
'google': #dd4b39,
}
// loop, to style social media links
for name, color in social
// selector based on href name
  [href*={name}]
    background: color
    &::before
      content: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/15542/' + name + '.png')
// styles
ul {
  margin: 0 auto;
  max-width: 30rem;
}
a {
    border: 4px solid black;
    border-radius: 6px;
    color: black;
    display: block;
    font-weight: bold;margin: 0.25rem;
    padding: 0.5rem;
    text-decoration: none;
     &::before {
        display: inline-block;
        vertical-align: middle;
        margin: 0 0.5em;
     }
}

在Less中,我们必须手动提取对的每一边:

自己平日在空洞的 Sass
工具包中使用递增循环,几乎不在具体的样式表中使用。其中一个不等是生成带编号的拔取器,可以动用
nth-child
(像我们地点做的等同),也可以利用自动生成的类名(平日用在栅格系统中)。下边我们将成立一个简练的不带间距的响应式栅格系统。

See the Pen Sass For-Loop
Grids by Miriam Suzanne
(@mirisuzanne) on
CodePen.

各种栅格都以比例,使用 span / context * 100%
统计——所有栅格系统利用的主干总结格局。以下是 Stylus 和 Less 的语法:

See the Pen Stylus For-Loop
Grids by Miriam Suzanne
(@mirisuzanne) on
CodePen.

循环条件

星际迷航并非完全虚构。如若您不小心,无限循环可能会使编译器变得卡顿或然损坏编译器。尽管那不是一个扑灭邪恶机器人好格局,然而它会负气使用你代码的人。所以循环的运用是有限度的——寻常是由一些递增的循环体恐怕目的集合定义。

在编程术语中:

  1. While
    循环是通用的,循环一贯运行直到满意条件。请小心!那里不难现身极其循环。
  2. For 循环是多如牛毛的,运行特定数量的循环体。
  3. For-Each 循环遍历集合可能列表,每便循环一项。

上述循环的施用限制依次递减。for-each 循环是
for 循环的一种样式, 它们也是 while
循环的一种格局。不过半数以上的应用处境只怕须求更有血有肉的分类。我很难在事实上工作中找到
while 循环——大部分例证使用 for 或者 for-each 处理的更好。所以
Stylus 只提供了后者的语法。Sass 的语法则提供了那三种格局,而 Less
并不曾循环语法——但那并不会妨碍大家!初阶吧。

巡回增量

For循环可以运行重复任意数量,而不只是对象的长度。
您可以运用它来创建网格布局(从1到12的列),循环通过色轮(色调从1到360),可能为持有nth-childdiv变化内容编号。
让大家早先一个循环生成36个div元素,每个div提供数字和背景颜色,使用:nth-child
Sass提供了一个例外的for循环语法:@for $ count$ start$ finish,其中$ start和$
finish都以整数。 如若早先值较大,Sass将向下计数而不是进化计数。

特种的头像

遍历集合的 for-each 循环

当有一个档次会聚(列表只怕数组)的时候,预处理器的循环是极度管用的——比如一组社交媒体图标和颜色,只怕一列情状修饰符(success,
warning, error, 等)。因为 for-each
循环自身就是处理项目汇集,它是最保证并最简单了然的大循环。

我们通过轮回一个简易的颜料列表来看望它是怎样做事的。

Sass 中,我们将应用 @each
指令(@each $item in $list)来获得颜色:

See the Pen Sass ForEach
List by Miriam Suzanne
(@mirisuzanne) on
CodePen.

Stylus 中,使用 for 语法(for item in list)处理集合:

See the Pen Stylus ForEach
List by Miriam Suzanne
(@mirisuzanne) on
CodePen.

Less并不曾提供循环的语法,不过大家得以应用 recursion
(递归)来取代。递归就是调用自我的函数或者 mixin 。在 Less 中,大家运用
mixins 落成递归:`亚洲必赢官网,`

.recursion() {
  /* an infinite recursive loop! */
  .recursion();
}

今天大家将向 mixins 中添加 when 关键字,有限协助循环可以告一段落。

.recursion() when (@conditions) { 
  /* a conditional recursive "while" loop! */
  .recursion();
}

大家可以如此创造 for 循环,添加一个从 1
起先的计数器(@i),然后依次递增(@i + 1),直到满意条件停止(@i <= length(@list)),其中
length(@list)
表示项目会聚的总额。即便每次巡回提取下一个列表项,我们将手动创造
for-each 循环:

See the Pen Less ForEach
List by Miriam Suzanne
(@mirisuzanne) on
CodePen.

在 Less
中,你做每件事都会境遇困难(原文评论中有那么些人指出了反对意见)。那是它的表征。

代码展位

through主要字表示大家的循环将包涵数字36.您还足以应用to重大字,其中不包蕴最后计数器:@for $i from 1 to 36将只循环35次。

Stylus具有与递增类似的语法,但是tothrough个别替换为.....

在 OddBird
上,大家规划了一个转移用户暗中同意头像的程序——可是指望暗中同意图尽只怕与众不一致。最终,大家只布署了
9 个格外的图标,使用循环生成 1296
个不等的头像,所以一大半用户不会看到重复的图像。

种种头像有 5 个属性:

<svg class=”avatar” data-dark=”1″ data-light=”2″ data-reverse=”true”
data-rotation=”3″> <use xlink:href=”#icon-avatar-1″
xmlns:xlink=”; </svg>

1
2
3
<svg class="avatar" data-dark="1" data-light="2" data-reverse="true" data-rotation="3">
  <use xlink:href="#icon-avatar-1" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
  1. 开端图标形状(9 个选项)
  2. 可以选装 0, 90, 180, 或者 270 度(4 个选项)“
  3. 深色填充色(6 个选项)
  4. 浅色背景色(6 个采用)
  5. 可以反相颜色的 true/false 属性(2 个选项)

代码中有 6 个颜色,3 个循环:

  1. @for $i from 0 through 定义八个旋转角度
  2. @for $i from 1 through length($colors)
    可以循环颜色集合($colors),给每一个颜色赋值($i)。平日本身会利用
    @each 循环遍历颜色集合,然而一旦每一项需求一个数值的时候,使用
    @for 更简单。
  3. 嵌套的
    @each $reverse in (true, false)可以让我们选拔是或不是将各种颜色组合的前景观和背景观反转。

以下是使用 Sass 编写的末梢结出:

See the Pen 1296 avatars using multiple
loops by Miriam Suzanne
(@mirisuzanne) on
CodePen.

您可以在课后把它转成 LessStylus 的代码。笔者已经看腻了。

对立媒体按钮

遍历列表很有用,不过不少时候你想遍历对象。一个司空见惯的事例就是给张罗媒体按钮添加差其他颜色和图标。对于列表中的每一项,大家需求应酬网络的名号以及品牌颜色。

$social: (
  'facebook': #3b5999,
  'twitter': #55acee,
  'linkedin': #0077B5,
  'google': #dd4b39,
);

只要接纳 Sass,大家得以采取语法
@each $key, $value in $array 来获取 key 值(网站名称)和 value
值(品牌颜色)。以下是所有的巡回:

See the Pen Sass Social Media
Loop by Miriam Suzanne
(@mirisuzanne) on
CodePen.

Stylus 有雷同的语法:for key, value in array

See the Pen Stylus Social Media
Loop by Miriam Suzanne
(@mirisuzanne) on
CodePen.

Less 中,大家亟须手动提取每一对:

See the Pen LESS Social Media
Loop by Miriam Suzanne
(@mirisuzanne) on
CodePen.

代码展位

Stylus还提供了一个range()函数,它同意你更改一个增量的深浅。
在界定(0,360,10)中采纳色调将在每一趟重复时将计数扩充10。
Less无法不再一次使用递归混合宏(recursive mixins)去完成。
大家可以为迭代次数(@i)创制一个参数,使用
when(@i> 0)限制标准,并在历次迭代时减去一个 ——
以使其像一个递减的for-loop:

通用的 while 循环

递增的 for 循环

For
循环可以运作任意数量的循环体,并不囿于于对象的长短。你可能会使用它创设一个栅格系统(for columns from 1 through 12),遍历色轮(for hue from 1 through 360)只怕拔取
nth-child 给 div 编号并生成内容。

上边大家遍历 36 个 div 成分,使用 :nth-child
给每一项添加编号及背景观。

Sass 提供了一个特有的 for
循环语法:@for $count from $start through $finish,其中 $start
$finish 都以整数。即使开头值比较大,Sass 会递减而不是比比皆是。

See the Pen Sass “for” loop
by Miriam Suzanne (@mirisuzanne) on
CodePen.

through 关键字表示循环包括数字 36 。你也足以选拔 to
关键字,它不带有最终一个成分,只会循环 35
次:@for $i from 1 to 36 。

Stylus 也有一样的递增的语法,不过 tothrough 要求替换成
... and .. :“

See the Pen Stylus “for”
loop by Miriam Suzanne
(@mirisuzanne) on
CodePen.

Stylus 也提供了一个 range() 函数,可以变动递增的步数。使用
for hue in range(0, 360, 10) 能够每趟以 10 的翻番递增。

Less 需求运用递归 mixins
。大家得以创建一个迭代数的参数(@i),使用 when (@i > 0)
条件截止循环,每回迭代减一,这样看上去像是递减的 for 循环。

See the Pen Less “for” loop
by Miriam Suzanne (@mirisuzanne) on
CodePen.

值得注意的是 CSS 也落到实处 nth-child
编号,不须要预处理器。不过 CSS 并不曾循环结构,它提供了一个 counter()
方法,依据 DOM 的数额递增,可以用来转移内容。不过在 content
属性之外使用是低效的,所以背景观并从未成形。

See the Pen CSS counter by
Miriam Suzanne (@mirisuzanne) on
CodePen.

代码展位

值得注意的是CSS在未曾使用预处理器的情景下也足以给我们第n个子节点编号。
即便CSS没有循环结构,但它真的提供了一个counter(),能够依照其余数据的DOM相关标准举行递增,并在转变的故事情节中应用。
很不满,它无法在content质量之外使用,因而我们的背景颜色不适用:

真正的 while
循环很少见,不过本身有时会选择。当自己看一条路子指向哪里时会万分管用。笔者并不想遍历整个集合大概特定数量的迭代——小编想在找到需求的要素时就告一段落循环。作者一般在架空的工具包中使用,而在日常编写样式表时并不须求。

自家使用 Sass
创制了一个帮手自身储存及控制颜色的工具包。使用变量存储颜色可能是其余预处理器最经常的选拔情况。半数以上人会如此做:

$pink: #E2127A; $brand-primary: $pink; $site-background:
$brand-primary;

1
2
3
$pink: #E2127A;
$brand-primary: $pink;
$site-background: $brand-primary;

我知道 pink
恐怕不是你网站的唯一色,不过未来用一个就够了。小编利用了多少个变量名,因为便宜创立抽象的图层——从基本色(pink)到更普遍的形式(brand-primary)以及具体的使用意况(site-background)。我还想把单色列表转换成预处理器可以编译的调色板。小编索要一种形式保障拥有数值是相关联的同时是一种情势。作者使用的法子是在独立的
Sass map 中,以键值对的款型储存核心颜色。

$colors: ( ‘pink’: #E2127A, ‘brand-primary’: ‘pink’, ‘site-background’:
‘brand-primary’, );

1
2
3
4
5
$colors: (
  ‘pink’: #E2127A,
  ‘brand-primary’: ‘pink’,
  ‘site-background’: ‘brand-primary’,
);

为何要小题大作?小编这么做是因为我可以运用一个独门的变量指定样式生成器,并且自动创立实时更新的调色盘。不过那是一把双刃剑,并不符合任何人。map
不容许小编像使用变量一样给直接给键值对赋值。为了找到逐个颜色的 value
值,作者索要动用 while 循环检索 key 值。

See the Pen Sass “while”
loop by Miriam Suzanne
(@mirisuzanne) on
CodePen.

自家不时如此做,不过只要你在自家的代码中搜寻 Sass 的 @while
你是找不到的。因为可以用递归函数完成均等的业务,而且可以再一次使用:

See the Pen Sass “while” recursive
function by Miriam Suzanne
(@mirisuzanne) on
CodePen.

今日我们得以在代码的其余地点调用 color() 函数。

Stylus 没有 while 循环的语法,不过足以采纳数组变量和递归函数:

See the Pen Stylus “while”
loop by Miriam Suzanne
(@mirisuzanne) on
CodePen.

Less
没有放置的数组变量,不过足以创立键值对模拟同样的出力,和社交媒体颜色的做法一样:

@colors: ‘pink’ #E2127A, ‘brand-primary’ ‘pink’, ‘site-background’
‘brand-primary’ ;

1
2
3
4
5
@colors:
  ‘pink’ #E2127A,
  ‘brand-primary’ ‘pink’,
  ‘site-background’ ‘brand-primary’
;

我们将创立 @array-get mixin ,使用 key 值从数组中检索 value
值,然后成立递归的 while 循环来跟随路径:

See the Pen Less “while” list
loop by Miriam Suzanne
(@mirisuzanne) on
CodePen.

演示可以运作,然而在 Less
中还有更好的点子,你可以不应用别名和命名变量构成的数组(不像 Sass 大概Stylus):

See the Pen Less name-spaced
variables by Miriam Suzanne
(@mirisuzanne) on
CodePen.

既然如此颜色在一个变量中可行,作者可以使用循环生成调色板。以下是运用 Sass
做的例子:

See the Pen Sass color
palette by Miriam Suzanne
(@mirisuzanne) on
CodePen.

小编深信您可以比自个儿做的更特出。

栅格系统

本身一般在架空的 Sass
工具包中使用递增循环,大约不在具体的体裁表中使用。其中一个例外是生成带编号的选取器,可以是
nth-child
(像大家地方做的同一),也足以是自动生成的类名(平常用在栅格系统中)。大家将开创一个概括的不带间距的响应式栅格系统。

See the Pen Sass For-Loop
Grids by Miriam Suzanne
(@mirisuzanne) on
CodePen.

各种栅格都以比例,使用 span / context * 100%
统计——所有栅格系统接纳的为主统计方法。以下是 Stylus 和 Less 的语法:

See the Pen Stylus For-Loop
Grids by Miriam Suzanne
(@mirisuzanne) on
CodePen.

See the Pen LESS For-Loop
Grids by Miriam Suzanne
(@mirisuzanne) on
CodePen.

代码展位

种种网格跨度是一个百分比,使用数学span / context * 100%——所有网格系统必须举办的为主总括。
这里再度用Stylus和Less已毕下:

Getting Loopy!

新鲜的头像

在 OddBird
上,大家统筹了一个浮动用户默许头像的顺序——不过期望暗中认可图尽只怕与众不相同。最后,大家只安顿了
9 个例外的图标,使用循环生成 1296
个例外的头像,所以大多数用户不会合到重复的头像。

各个头像有 5 个属性:

<svg class="avatar" data-dark="1" data-light="2" data-reverse="true" data-rotation="3">
  <use xlink:href="#icon-avatar-1" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg> 
  1. 开班图标形状(9 个选项)
  2. 能够选装 0, 90, 180, 或者 270 度(4 个选项)“
  3. 深色填充色(6 个选项)
  4. 浅色背景象(6 个选拔)
  5. 可以反相颜色的 true/false 属性(2 个选项)

代码中有 6 个颜色,3 个循环:

  1. @for $i from 0 through 定义八个旋转角度
  2. @for $i from 1 through length($colors)
    可以循环颜色集合($colors),给每一个颜色赋值($i)。平日自身会动用
    @each 循环遍历颜色集合,然则固然每一项须要一个数值的时候,使用
    @for 更简单。
  3. 嵌套的
    @each $reverse in (true, false)可以让大家选择是不是将每种颜色组合的前景象和背景观反转。

以下是运用 Sass 编写的末梢结出:

See the Pen 1296 avatars using multiple
loops by Miriam Suzanne
(@mirisuzanne) on
CodePen.

你可以在课后把它转成 LessStylus 的代码。小编早已看腻了。

代码展位

一经您不明白该怎么时候使用循环,时刻检点循环体。你是否有恢宏比照千篇一律格局的拔取器,或许再度的计量?上边告诉您怎么样判定哪些循环是最好的:

  1. 假诺您可以列出并取名循环中的项目,使用 for-each 遍历。
  2. 如若循环的次数比循环体本人主要,恐怕一旦你须求给每一项编号,请使用
    for 循环。
  3. 一旦您须求拜访同一个巡回,只是输入值不同,尝试递归函数。
  4. 对此别的情形(大致根本没有),使用 while 循环。
  5. 设若你选择 Less… 祝你有幸!

尽情的享用循环呢!

打赏匡助本身翻译更加多好小说,多谢!

打赏译者

特殊的 while 循环

真正的 while
循环很少见,不过本人有时候会使用。当我看一条途径指向何方时会卓殊管用。作者并不想遍历整个集合大概特定数量的迭代——作者想在找到要求的要素时就告一段落循环。我常常在空洞的工具包中使用,而在一般编写样式表时并不需求。

本身动用 Sass
成立了一个支援自身储存及控制颜色的工具包。使用变量存储颜色可能是此外预处理器最平凡的使用情状。超过半数人会那样做:

$pink: #E2127A;
$brand-primary: $pink;
$site-background: $brand-primary;

我知道 pink
大概不是您网站的唯一色,可是以后用一个就够了。作者使用了多少个变量名,因为便宜创立抽象的图层——从基本色(pink)到更广阔的方式(brand-primary)以及具体的施用情状(site-background)。作者还想把单色列表转换成预处理器可以编译的调色板。小编索要一种办法保障拥有数值是相关联的还如若一种方式。作者利用的办法是在独立的
Sass map 中,以键值对的款型储存宗旨颜色。

$colors: (
  'pink': #E2127A,
  'brand-primary': 'pink',
  'site-background': 'brand-primary',
);

怎么要小题大作?作者如此做是因为小编可以运用一个单独的变量指定样式生成器,并且自动成立实时更新的调色盘。不过那是一把双刃剑,并不切合任哪个人。map
不允许我像使用变量一样给直接给键值对赋值。为了找到各个颜色的 value
值,我急需选用 while 循环检索 key 值。

See the Pen Sass “while”
loop by Miriam Suzanne
(@mirisuzanne) on
CodePen.

自家每每如此做,可是若是您在小编的代码中找找 Sass 的 @while
你是找不到的。

See the Pen Sass “while” recursive
function by Miriam Suzanne
(@mirisuzanne) on
CodePen.

近来大家可以在代码的任何地方调用 color()
函数。

Stylus 没有 while
循环的语法,但是足以采用数组变量和递归函数:

See the Pen Stylus “while”
loop by Miriam Suzanne
(@mirisuzanne) on
CodePen.

Less
没有放手的数组变量,不过大家得以创建键值对模拟同样的效益,和交际媒体颜色的做法无异于:

@colors:
  'pink' #E2127A,
  'brand-primary' 'pink',
  'site-background' 'brand-primary'
;

笔者们将开创 @array-get mixin ,使用 key
值从数组中搜寻 value 值,然后成立递归的 while 循环来跟随路径:

See the Pen Less “while” list
loop by Miriam Suzanne
(@mirisuzanne) on
CodePen.

用作示范可以运作,可是在 Less
中还有更好的方法,你可以不选用别名和命名变量构成的数组(不像 Sass 可能Stylus):

See the Pen Less name-spaced
variables by Miriam Suzanne
(@mirisuzanne) on
CodePen.

既然如此颜色在一个变量中可行,我得以拔取循环生成调色板。以下是接纳
Sass 做的例证:

See the Pen Sass color
palette by Miriam Suzanne
(@mirisuzanne) on
CodePen.

作者深信您可以比本身做的更雅观。

代码展位

打赏帮忙本人翻译更加多好小说,感谢!

亚洲必赢官网 3

1 赞 收藏
评论

Getting Loopy!

若是你不知晓该如曾几何时候利用循环,时刻留意循环体。你是或不是有雅量根据相同情势的选取器,或许重新的乘除?上边告诉你哪些判断哪些循环是最好的:

  1. 万一您可以列出并取名循环中的项目,使用 for-each 遍历。
  2. 只要循环的次数比循环体自己主要,大概一旦你须求给每一项编号,请使用
    for 循环。
  3. 设若您要求拜访同一个巡回,只是输入值不相同,尝试递归函数。
  4. 对此其他情形(大约根本没有),使用 while 循环。
  5. 倘若你接纳 Less… 祝你有幸!

尽情的享用循环呢!

定制头像

在OddBird,大家方今统筹了一个暗含暗中认同用户头像的应用程序 –
但大家意在暗中同意值尽大概的唯一。
最终,我们只陈设了九个尤其的图标,并应用循环将它们转换成1296个例外的头像,所以大多数用户永远不会晤到重复的头像。
各种头像有多性格情:

有关我:叙帝利

亚洲必赢官网 4

每三次选用都不可能不是三次当先,否则就毫无挑选;每五次抛弃都必须是一遍进步,否则就绝不废弃。

个人主页 ·
小编的稿子 ·
16 ·
   

亚洲必赢官网 5

代码展位

  • 先导图标形状(9个选项)
  • 旋转0,90,180或270度(4个选项)
  • 深色填充(6选项)
  • 浅色背景(6选项)
  • 反转颜色的true / false属性(2个选项)
    代码有多种颜色和两个循环:
    @for $i from 0 through 3给大家多个旋转
    @for $i from 1 through length($colors)允许我们循环遍历颜色列表($ colors),并为每一个颜色分配一个数字($i)。
    平日自身会采纳@each循环遍历颜色的聚合,可是@for是更简便易行的,当自家急需一个数字,每一种项目以及。
    嵌套的@each $ reverse(true,false)为我们提供了为各类颜色组合翻转前景和背景的选项。
    它说到底在Sass中的结果为:

代码展位

将它转换为LessStylus都以一律的覆辙,不再去过多体现了。

通用while循环

真正的while巡回很少,但本人偶尔使用它们。
小编发现它们最有效的,当我沿着一个路子,看看它的根。
小编不想循环遍历整个集合或特定数量的迭代 –
作者想维持循环,直到小编找到自身想要的。
那是自己在自己的抽象工具包中使用的东西,但不是你在日常使用中那一个须要的东西。
自个儿创设了一个工具包来扶助自个儿在Sass中存储和操作颜色。
在变量中蕴藏颜色或然是其他预处理器最广泛的用例。 一大半人做这么的作业:

代码展位

自己掌握粉深绿恐怕不是您的网站上唯一的颜色,但它是今日唯一一个现行就须求的。
小编给它多少个名称,因为它对于建立抽象层是丰富实用的 –
从不难的颜色(粉北京蓝),更广泛的形式(品牌主)和切实的用例(站点背景)。
作者还想把单个颜色的列表转换成小编的预处理器可以领略的调色板。
小编急需一种办法去表明这一个值的相关性,并且是该方式的一有些。
那样做,笔者在一个单独的Sass地图存储所有我急需的核心颜色和键值对:
何以如此做?
作者这么做,因为本身可以用一个单纯的变量指向自家的体制指南生成器,并活动创立一个保持更新的调色板。
但是权衡利弊,这对于每种人的话并不是都以未可厚非化解方案。
这些样式图不允许像自家得以用变量一致在对中间开展直接赋值。
作者急需一个while循环来跟踪键名的痕迹,以便找到逐个颜色的值:

展位图

小编平素如此做,但万一你寻找作者的代码为Sass@while,你会找不到它。
这是因为您可以用递归函数完成平等的事情,使其可选取:

展位图

于今我们得以在代码中的任哪个地点方调用color()函数。
Stylus没有while巡回的语法,但它也允许数组变量和递归函数:

展位图

Less没有松开的数组变量,但大家得以通过创造一个对列表来效仿相同的出力,似乎大家对社交媒体颜色所做的如出一辙:

展位图

我们必须创建和谐的
@ array-get mixin来行使键名从数组中搜寻值,然后创制大家的递归while巡回以遵从以下途径:

展位图

那适用于演示的目标,但在Less大概有一个更好的法门来做那么些,因为你能够接纳别名和命名空间变量而不使用数组(不像Sass或Stylus):

展位图

现今颜色可以用一个变量去成功落到实处,笔者可以运用另一个巡回来生成自身的调色板。
那里有一个快速示例Sass:

展位图

本身信任你可以比自个儿做的更好。

总结

如若你不确定哪一天在代码中行使循环,请小心重复。
你有多少个选用器坚守类似的形式,或一个计量你平素在做?
以下是怎么着判断哪些循环是最好的:
万一您可以列出和命名循环中的项目,使用for-each巡回遍历它们。
若是重复次数比其他源项目集更关键,可能一旦你要求您的项目编号,请使用for循环。
假使你须求拜访具有不一样输入的一致循环,请尝试运用递归函数。
对此其余别的(大概平素不),使用while循环。
要是您使用较少…祝你碰巧!
Have fun looping!

网站地图xml地图