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

CSS 预处理器中的循环

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

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

假若您看过老的科幻电影,你势必精晓循环的有力之处。给您的机器人克星设置极端循环,它就会爆炸,然后机器人灰飞烟灭了。

预处理器的大循环并不会在满天中发生猛烈爆炸(作者希望),不过它有利于书写 DKugaY
CSS(译者注:详细介绍可以参考那篇小说
 )。每种人在座谈格局库以及模块化设计的时候,半数以上人的关切点是
CSS 接纳器。无论你选拔哪个种类情势的选用器(BEM、OOCSS、SMACSS
等等),循环可以使设计情势易读并且可珍爱,间接编译到代码中。

我们先看一看循环能做什么,以及在主流的 CSS
预处理器(Sass,
Less,Stylus
)中怎么着使用。每一个语言都有异样的语法,可是最终的功用是同等的。有各种办法制作
1头循环走动的猫

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”>公布地址:

预处理器循环不会在上空中引起热烈的爆裂(小编期待),但它们对于编写D帕杰罗Y
CSS非凡实惠。
就算我们都在谈论的样式库和模块化设计,一大半第三一贯在CSS选取器那方面。
不管你挑选怎么的缩写格局(BEM,OOCSS,SMACSS,ETC),循环可以协理维持你的体制更具可读性和可维护性,直接加工到您的代码中。

预处理器循环不会在空间中挑起激烈的爆裂(作者愿意),但它们对于编写D奥德赛Y
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。
每一种语言都提供了一种相当的语法,但她们都形成了办事。
有不止一种格局来循环1头猫。

我们将看看循环可以做什么,以及哪些在重大的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)
表示项目汇集的总数。如若每一遍巡回提取下1个列表项,大家将手动创设
for-each 循环:

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

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

预处理器的轮回并不会在太空中发生强烈爆炸(小编期望),不过它有利于书写
D帕杰罗Y 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
)中如何采纳。各个语言都有新鲜的语法,可是最后的成效是同样的。有多样主意制作
3只循环走动的猫

巡回条件

最好循环是一件很吓人的事务。
若是你不小心,无限循环只怕会减慢或让您的编译器崩溃。
那就是干什么循环应该总是提供限制标准的目标 ——
寻常由四个增量重复或对象集合定义。

循环条件

星际迷航中的循环没有完全错误。
假使你不小心,无限循环或然会减速或让您的编译器崩溃。
就算那不是一个来化解邪恶的机器人很好的主意,它会负气任何利用你代码的人。
那就是为何循环应该总是提供个其他目的 –
寻常由多少个增量重复或对象集合定义。

递增的 for 循环

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

在编程术语中:
  • while循环是通用的,并且在知足任何条件时将保险循环。 小心!
    那是但是循环最只怕的地方。
  • For循环是增量式的,对于特定数量的重复运维。
  • For-Each循环遍历集合或列表,三遍一个地遍历每种项目。
    每种类型的循环比前面更细粒度。
    3个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-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 也提供了3个 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)将大家的循环迭代限制为与我们的聚集相同的长度。
借使大家在历次传递中提取下1个列表项,我们将有3个手动的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循环被绑定到已知的体系汇集,它们往往是最实际和可知道的轮回。
让大家从循环1个简练的颜料列表伊始,看看它是哪些做事的。
在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();
}

后天我们添加2个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;
  }
}

张罗媒体按钮

循环遍历列表大概很有用,但越来越多时候你想循环遍历对象。
3个普遍的例子是为张罗媒体按钮分配区其余水彩和图标。
对于列表中的各个项目,大家需求网站的名称和该社交网络的品牌颜色:
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转移内容编号。
让大家起头八个循环生成45个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个从 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将只循环叁拾三回。

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

在 OddBird
上,我们设计了1个转变用户暗中认可头像的程序——不过指望默许图尽或然与众不相同。最后,大家只安顿了
9 个优异的图标,使用循环生成 129六个不等的头像,所以大多数用户不会看到重复的图像。

各样头像有 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 循环遍历颜色集合,不过假使每一项要求3个数值的时候,使用
    @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还提供了1个range()函数,它同意你更改3个增量的尺寸。
在限定(0,360,10)中利用色调将在每一趟重复时将计数扩大10。
Less必须再次使用递归混合宏(recursive mixins)去落成。
大家得以为迭代次数(@i)成立3个参数,使用
when(@i> 0)界定条件,并在每一趟迭代时减去二个 ——
以使其像四个递减的for-loop:

通用的 while 循环

递增的 for 循环

For
循环可以运维任意数量的循环体,并不局限于对象的长短。你或然会采纳它创设3个栅格系统(for columns from 1 through 12),遍历色轮(for hue from 1 through 360)恐怕应用
nth-child 给 div 编号并生成内容。

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

Sass 提供了1个新鲜的 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
或者不是你网站的唯一色,但是未来用3个就够了。小编利用了几个变量名,因为便宜创制抽象的图层——从基本色(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
(像大家地点做的平等),也足以是自动生成的类名(常常用在栅格系统中)。大家将创建2个简短的不带间距的响应式栅格系统。

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 个卓越的图标,使用循环生成 12九十几个例外的头像,所以一大半用户不相会到重复的头像。

每一个头像有 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
只怕不是你网站的唯一色,但是今后用1个就够了。小编利用了八个变量名,因为便宜成立抽象的图层——从基本色(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,大家多年来安插了一个涵盖暗中同意用户头像的应用程序 –
但我们期待暗许值尽或然的唯一。
最后,大家只安顿了8个独特的图标,并采取循环将它们转换成129四个不相同的头像,所以一大半用户永远不会看出重复的头像。
各类头像有三性子子:

关于小编:叙帝利

澳门葡京 4

每五次接纳都无法不是两回当先,否则就毫无挑选;每五次放任都无法不是一遍提高,否则就不要放任。

个人主页 ·
作者的篇章 ·
16 ·
   

澳门葡京 5

代码展位

  • 开首图标形状(七个选用)
  • 旋转0,90,180或270度(4个选项)
  • 深色填充(6选项)
  • 浅色背景(6选项)
  • 反转颜色的true / false属性(1个挑选)
    代码有四种颜色和多个巡回:
    @for $i from 0 through 3给我们七个旋转
    @for $i from 1 through length($colors)允许咱们循环遍历颜色列表($ colors),并为每一种颜色分配2个数字($i)。
    日常自身会拔取@each循环遍历颜色的联谊,然则@for是更简便的,当自个儿索要二个数字,每种系列以及。
    嵌套的@each $ reverse(true,false)为大家提供了为各类颜色组合翻转前景和背景的选项。
    它最后在Sass中的结果为:

代码展位

将它转换为LessStylus都是一致的套路,不再去过多浮现了。

通用while循环

真正的while巡回很少,但本身有时候使用它们。
小编发觉它们最管用的,当自家沿着三个路径,看看它的根。
作者不想循环遍历整个集合或一定数量的迭代 –
小编想维持循环,直到自个儿找到本人想要的。
那是本身在本身的用空想来欺骗别人工具包中使用的东西,但不是你在普通使用中国和欧洲常必要的东西。
本身营造了2个工具包来辅助本人在Sass中储存和操作颜色。
在变量中贮存颜色只怕是其他预处理器最普遍的用例。 一大半人做如此的作业:

代码展位

本人知道粉青莲大概不是你的网站上唯一的颜料,但它是后天唯一2个现行就需求的。
小编给它多个名称,因为它对于树立抽象层是可怜有效的 –
从简单的颜色(粉土褐),更广阔的方式(品牌主)和现实性的用例(站点背景)。
作者还想把单个颜色的列表转换来作者的预处理器可以清楚的调色板。
小编急需一种方法去表述那几个值的相关性,并且是该格局的一部分。
那样做,笔者在3个单独的Sass地图存储全体笔者急需的宗旨颜色和键值对:
为啥这么做?
小编这么做,因为自个儿得以用两个单一的变量指向自家的体制指南生成器,并机关制造1个保持更新的调色板。
可是权衡利弊,这对于各个人来说并不是都以科学化解方案。
那几个样式图不容许像自家得以用变量一致在对中间展开直接赋值。
小编要求2个while循环来跟踪键名的印痕,以便找到每一种颜色的值:

展位图

自个儿平昔这么做,但假如你寻找小编的代码为Sass@while,你会找不到它。
那是因为你可以用递归函数完成均等的作业,使其可选拔:

展位图

当今大家可以在代码中的任哪个地点方调用color()函数。
Stylus没有while循环的语法,但它也同意数组变量和递归函数:

展位图

Less没有放置的数组变量,但大家得以经过创办三个对列表来效仿相同的法力,就像是大家对社交媒体颜色所做的一样:

展位图

作者们不大概不创建和谐的
@ array-get mixin来使用键名从数组中摸索值,然后创制大家的递归while巡回以听从以下途径:

展位图

那适用于演示的目的,但在Less或然有七个更好的艺术来做那么些,因为你可以行使别名和命名空间变量而不使用数组(不像Sass或Stylus):

展位图

近日颜色可以用1个变量去成功促成,我得以选用另一个巡回来生成自个儿的调色板。
那里有二个迅速示例Sass:

展位图

本人信任你能够比自个儿做的更好。

总结

万一你不鲜明几时在代码中行使循环,请小心重复。
你有多个选拔器遵从类似的情势,或壹个测算你平昔在做?
以下是怎么样判断哪些循环是最好的:
如若您可以列出和命名循环中的项目,使用for-each循环遍历它们。
假定再度次数比任何源项目集更重视,或然一旦你需求你的项目编号,请使用for循环。
万一您须求拜访具有不同输入的同一循环,请尝试使用递归函数。
对此其他其余(大概从不),使用while循环。
假设您采纳较少…祝你好运!
Have fun looping!

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website