预微机中的循环,CSS预微处理机中的循环

CSS 预微型机中的循环

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

本文由 伯乐在线 - 叙帝利 翻译,黄利民 校稿。未经许可,禁止转发!
印度语印尼语出处:css-tricks。款待参加翻译组。

借让你看过老的科学幻想电影,你早晚明白循环的强硬之处。给您的机器人克星设置极端循环,它就能放炮,然后机器人灰飞烟灭了。

预微型机的大循环并不会在高空中爆发生硬爆炸(作者愿意卡塔 尔(英语:State of Qatar),然则它实惠书写 D索罗德Y CSS(译者注:详细介绍能够参照那篇小说  卡塔尔国。各类人在斟酌形式库以致模块化设计的时候,超过一半人的关怀点是 CSS 接受器。无论你选用哪个种类格局的选用器(BEM、OOCSS、SMACSS 等等卡塔尔国,循环能够使设计方式易读况且可保险,直接编写翻译到代码中。

小编们先看风华正茂看循环能做什么样,以至在主流的 CSS 预微电脑(Sass, Less,Stylus 卡塔 尔(英语:State of Qatar)中如何行使。每生龙活虎种语言都有特有的语法,然而最后的效果是后生可畏致的。有多样方法制作 壹头循环走动的猫

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

PostCSS 也很盛行,不过小编并从未语法。即使它被称作后计算机,但自己赏识称它为 meta-preprocessor。PostCSS 允许书写并分享您本身的预微电脑语法。假如您愿意,你能够在 PostCSS 中重写 Sass 恐怕 Less,但是 早原来就有人在你早先那样做了

预微处理器循环不会在空中中挑起激烈的爆炸(笔者期望卡塔 尔(英语:State of Qatar),但它们对于编写DLacrosseY CSS极其管用。 即使我们都在座谈的样式库和模块化设计,大多数关键一贯在CSS选取器这下边。 不管你挑选什么样的缩写格局(BEM,OOCSS,SMACSS,ETC卡塔尔国,循环能够援助维持您的体制更具可读性和可维护性,直接加工到您的代码中。

巡回条件

星际迷航并不是全盘假造。若是你相当大心,Infiniti循环大概会使编写翻译器变得卡顿或许破坏编写翻译器。纵然这不是消逝邪恶机器人的好法子,可是它会负气使用你代码的人。所以循环的施用是有限度的——平常是由局地依次增加的循环体恐怕目标会集定义。在编制程序术语中:

  1. While 循环是通用的,循环平素运维直到满意条件。请小心!这里轻易并发可是循环。
  2. For 循环是多如牛毛的,运转特定数量的循环体。
  3. For-Each 循环遍历群集大概列表,每一次循环生龙活虎项。

上述循环的利用节制依次依次减少。for-each 循环是 for 循环的生龙活虎种情势, 它们也是 while 循环的后生可畏种情势。不过大多数的行使情状大概要求更具象的分类。笔者很难在实际专门的学业中找到 while 循环——大好些个事例使用 for 或者 for-each 管理的更加好。所以 Stylus 只提供了前面一个的语法。Sass 的语法则提供了那二种办法,而 Less 并从未循环语法——但那并不会妨碍大家!最初吧。``

大家将看看循环能够做哪些,甚至怎样在事关心珍视大的CSS预微机中使用它们:Sass,Less和Stylus。 每种语言都提供了生机勃勃种独特的语法,但他们都成功了办事。 有不唯有意气风发种艺术来循环三头猫。

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

当有三个门类汇聚(列表也许数组卡塔尔的时候,预微型机的大循环是极度有效的——比方意气风发组社交媒体Logo和颜色,大概一列情况修饰符(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 中,你做每件事都会遇到困难(原来的文章商量中有广大人提出了反驳意见卡塔尔。那是它的本性。

PostCSS也相当受招待,但它不提供它协调的别的语法。 即使它不常被称呼后计算机,小编称之为元预微处理机。 PostCSS允许你编写和共享自身的预微型机语法。 假若你想,你能够重写Sass或Less在PostCSS,但有人曾经先行一步了。

周旋媒体开关

遍历列表很有用,可是过多时候你想遍历对象。三个惯常的例证就是给张罗媒体开关增添差异的颜色和Logo。对于列表中的每大器晚成项,大家必要应酬网络的名目以致品牌颜色。

$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 值(品牌颜色卡塔 尔(英语:State of Qatar)。以下是全部的轮回:

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.

巡回条件

但是循环是大器晚成件很可怕的事情。 假让你不当心,Infiniti循环或者会放缓或令你的编写翻译器崩溃。 那正是为什么循环应该总是提供节制条件的目标 —— 常常由八个增量重复或对象集结定义。

递增的 for 循环

在编制程序术语中:
  • while循环是通用的,并且在满足任何条件时将保持循环。 小心! 那是十二万分循环最恐怕的地点。
  • For循环是增量式的,对于特定数量的再一次运营。
  • For-Each循环遍历集合或列表,叁回三个地遍历种种品种。
    每类别型的循同比前边更加细粒度。 三个for-each循环只是风度翩翩种for巡回,那也是生龙活虎种while循环。 不过绝大许多的用例都归于更实际的花色。 笔者很难在此外规范下搜索真正的while循环 —— 大好些个例子能够越来越好地管理forfor-each。 这大概是干什么Stylus只提供后面一个的语法。 Sass为二种循环情势都提供了出格的语法,Less在本事上根本未曾循环语法 - 但那不会堵住大家! 让大家深切切磋一下。

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.

for-each循环

预微处理器循环在您有要循环的档期的顺序(列表或数组卡塔 尔(英语:State of Qatar)(如社交媒体Logo和颜料数组卡塔 尔(英语:State of Qatar)或意况修饰符列表(successwarningerror等卡塔 尔(英语:State of Qatar)时最有用。 因为for-each巡回被绑定到已知的系列集聚,它们往往是最实际和可掌握的轮回。
让我们从循环三个总结的颜色列表伊始,看看它是怎么样专业的。
在Sass中,大家将使用@each指令(@each $item in $list卡塔 尔(英语:State of Qatar)来获得颜色:

<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卡塔 尔(英语:State of Qatar) - 在那之中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中完结那全体是很拮据的大器晚成种方法。

栅格系统

社交媒体按键

循环遍历列表大概很有用,但越多时候你想循环遍历对象。 二个大规模的事例是为张罗媒体开关分配差异的水彩和Logo。 对于列表中的每个连串,我们须求网址的名目和该社交互作用联网的品牌颜色:
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;
  }
}

自家平时在抽象的 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.

巡回增量

For循环能够运作重复大肆数量,而不只是对象的长短。 您能够动用它来创建网格布局(从1到12的列卡塔尔国,循环通过色轮(色调从1到360卡塔 尔(英语:State of Qatar),或许为全体nth-childdiv转移内容编号。
让我们起先三个循环生成39个div元素,每个div提供数字和背景颜色,使用:nth-child
Sass提供了叁个非同通常的for循环语法:@for $ count$ start$ finish,其中$ start和$ finish都是整数。 如若开首值不小,Sass将向下计数并不是演化计数。

破例的头像

代码展位

through关键字表示大家的轮回将囊括数字36.你还足以接收to第一字,在那之中不蕴涵最后计数器:@for $i from 1 to 36将只循环二十八回。

Stylus具备与依次增加肖似的语法,可是tothrough各自替换为.....

在 OddBird 上,大家设计了三个调换客户暗中同意头像的主次——不过指望暗中认可图尽或然匠心独具。最终,大家只安排了 9 个特别的Logo,使用循环生成 1299个不一致的头像,所以半数以上顾客不会看出重复的图像。

各类头像有 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. 开班Logo形状(9 个选取卡塔 尔(英语:State of Qatar)
  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卡塔 尔(英语:State of Qatar),给种种颜色赋值($i卡塔 尔(英语:State of Qatar)。平常自个儿会使用 @each 循环遍历颜色群集,不过假使每后生可畏项要求二个数值的时候,使用 @for 更简单。
  3. 嵌套的 @each $reverse in (true, false)能够让大家选用是不是将各种颜色组合的前途色和背景观反转。

以下是行使 Sass 编写的末尾结果:

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

您能够在课后把它转成 LessStylus 的代码。小编已经看腻了。

代码展位

Stylus还提供了四个range()函数,它同意你校正多个增量的大大小小。 在约束(0,360,10卡塔尔国中应用色调就要历次重复时将计数扩张10。
Less总得重新利用递归混合宏(recursive mixins)去贯彻。 大家可感觉迭代次数(@i卡塔尔国创立一个参数,使用 when(@i> 0)节制条件,并在历次迭代时减去二个 —— 以使其像多个依次减少的for-loop:

通用的 while 循环

代码展位

值得注意的是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卡塔 尔(英语:State of Qatar)。笔者还想把单色列表转变到预微处理机能够编写翻译的调色板。我供给生龙活虎种办法有限协助全部数值是相关联的同临时候是豆蔻梢头种形式。作者利用的不二秘诀是在独立的 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卡塔 尔(英语:State of Qatar):

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.

自己信赖你能够比小编做的更优异。

代码展位

各类网格跨度是多少个比例,使用数学span / context * 100%——全部网格系统必需开展的着力总计。 这里再度用Stylus和Less实现下:

Getting Loopy!

代码展位

假诺你不明了该如曾几何时候利用循环,时刻注意循环体。你是或不是有大气安份守己平等格局的选拔器,可能另行的测算?下边告诉你如何决断哪些循环是最佳的:

  1. 假诺您能够列出并取名循环中的项目,使用 for-each 遍历。
  2. 举个例子循环的次数比循环体本人主要,恐怕只要您要求给每大器晚成项编号,请使用 for 循环。
  3. 若是您供给拜访同一个周而复始,只是输入值差别,尝试递归函数。
  4. 对此其余情状(大概根本不曾卡塔尔,使用 while 循环。
  5. 大器晚成经您使用 Less… 祝你好运!

尽情的享受循环呢!

打赏辅助小编翻译更加多好小说,谢谢!

打赏译者

代码展位

打赏扶植本身翻译越多好小说,多谢!

图片 2

1 赞 收藏 评论

定制头像

在OddBird,我们近年来兼备了一个带有暗中认可客商头像的应用程序 - 但我们期望暗中认可值尽恐怕的独占鳌头。 最终,大家只布署了七个奇特的Logo,并运用循环将它们转变到12九十九个不等的头像,所以当先八分之四客商永恒不拜望到重复的头像。
每一个头像有五本本性:

有关小编:叙帝利

图片 3

每二回接受都一定要是三次超过,不然就无须接纳;每二回遗弃都必需是一次升高,不然就不要放弃。 个人主页 · 笔者的稿子 · 16 ·    

图片 4

代码展位

  • 起初Logo形状(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!

本文由星彩网app下载发布于前端技术,转载请注明出处:预微机中的循环,CSS预微处理机中的循环

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。