您的位置:时时app平台注册网站 > web前端 > CSS预管理器中的循环

CSS预管理器中的循环

2019-10-11 04:43

循环条件

星际迷航并非全盘虚拟。假若您不当心,Infiniti循环大概会使编写翻译器变得卡顿或许破坏编写翻译器。纵然那不是消灭邪恶机器人的好方法,不过它会负气使用你代码的人。所以循环的施用是有限度的——平常是由局地递增的循环体只怕指标集合定义。在编制程序术语中:

  1. While 循环是通用的,循环一直运营直到满意条件。请小心!这里轻便并发最为循环。
  2. For 循环是雨后春笋的,运转特定数量的循环体。
  3. For-Each 循环遍历集结只怕列表,每趟循环一项。

上述循环的施用限制依次递减。for-each 循环是 for 循环的一种形式, 它们也是 while 循环的一种样式。可是多数的选取情况只怕必要更切实的分类。小编很难在实际上中国人民解放军海军事工业程大学业作中找到 while 循环——大多数例证使用 for 或者 for-each 管理的越来越好。所以 Stylus 只提供了后面一个的语法。Sass 的语准绳提供了那三种办法,而 Less 并从未循环语法——但这并不会妨碍大家!起头吧。``

代码展位

假使您不精晓该如什么日期候使用循环,时刻检点循环体。你是或不是有恢宏依照同样形式的选取器,或然重新的估摸?下边告诉您什么判别哪些循环是最好的:

  1. 万一你能够列出并取名循环中的项目,使用 for-each 遍历。
  2. 只要循环的次数比循环体本人首要,也许只要您供给给各样编号,请使用 for 循环。
  3. 假如您要求拜见同贰个循环,只是输入值分歧,尝试递归函数。
  4. 对此别的情状(大致根本未有),使用 while 循环。
  5. 譬如你使用 Less… 祝你恰巧!

尽情的享受循环呢!

打赏扶植本人翻译更加多好作品,多谢!

打赏译者

展位图

那适用于演示的目标,但在Less也可以有多少个越来越好的秘技来做那么些,因为你能够利用别称和命名空间变量而不采取数组(不像Sass或Stylus):

十分的头像

PostCSS也十分受迎接,但它不提供它自个儿的任何语法。 纵然它不常被称之为后Computer,作者叫作元预管理器。 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 值(品牌颜色)。以下是整个的循环:

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.

代码展位

本身精晓粉黑灰只怕不是你的网址上并世无双的颜色,但它是当今独一一个现行反革命就供给的。 笔者给它三个称呼,因为它对于树立抽象层是十三分平价的 - 从简单的水彩(粉中湖蓝),更加宽广的方式(品牌主)和实际的用例(站点背景)。 作者还想把单个颜色的列表转变到作者的预管理器能够明白的调色板。 我急需一种格局去表述那么些值的相关性,何况是该形式的一部分。 这样做,作者在一个单独的Sass地图存款和储蓄全部作者须求的宗旨颜色和键值对:
干什么如此做? 小编如此做,因为小编得以用叁个单一的变量指向自家的样式指南生成器,并自动创设二个保证更新的调色板。 可是权衡利弊,那对于每种人的话实际不是都是不错施工方案。 那些样式图不一样意像本身能够用变量一致在对里面举办间接赋值。 笔者索要叁个while巡回来追踪键名的划痕,以便找到每一种颜色的值:

通用的 while 循环

展位图

当今大家得以在代码中的任什么地区方调用color()函数。
Stylus没有while循环的语法,但它也允许数组变量和递归函数:

在 OddBird 上,大家设计了多个变通客商暗许头像的前后相继——可是期望私下认可图尽或然离经叛道。最后,我们只陈设了 9 个奇特的Logo,使用循环生成 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="; </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 个选用)
  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 的代码。笔者早就看腻了。

代码展位

种种网格跨度是二个比重,使用数学span / context * 100%——全体网格系统必须举办的中坚总计。 这里再度用Stylus和Less达成下:

栅格系统

代码展位

值得注意的是CSS在向来不采纳预管理器的情状下也足以给大家第n个子节点编号。 即便CSS没有循环结构,但它确实提供了三个counter(),能够依据别的数据的DOM相关规范实行递增,并在退换的原委中采取。 很缺憾,它不能够在content性子之外使用,因而大家的背景颜色不适用:

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.

在编制程序术语中:
  • while循环是通用的,何况在知足任何条件时将有限支撑循环。 小心! 那是极度循环最恐怕的地方。
  • For循环是增量式的,对于特定数量的双重运转。
  • For-Each循环遍历集结或列表,贰回多个地遍历每种体系。
    每体系型的循环比前边越来越细粒度。 三个for-each巡回只是一种for巡回,那也是一种while循环。 不过大相当多的用例都属于更具体的种类。 作者很难在任何规范下搜索真正的while循环 —— 大很多例子能够越来越好地拍卖forfor-each。 那大概是为何Stylus只提供后面一个的语法。 Sass为三种循环格局都提供了不一致平日的语法,Less在技巧上根本未曾循环语法 - 但那不会阻拦大家! 让我们浓厚研究一下。

Getting Loopy!

for-each循环

预管理器循环在你有要循环的种类(列表或数组)(如社交媒体Logo和颜料数组)或状态修饰符列表(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中达成那总体是很拮据的一种艺术。

本身平时在空虚的 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.

展位图

作者间接这么做,但借让你搜索小编的代码为Sass@while,你会找不到它。 那是因为您能够用递归函数达成平等的专门的学业,使其可采用:

真正的 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.

本身深信不疑你能够比作者做的更玄妙。

通用while循环

真正的while循环非常少,但自己有时使用它们。 笔者意识它们最可行的,当本人本着一个路线,看看它的根。 笔者不想循环遍历整个集结或特定数量的迭代 - 笔者想维持循环,直到自个儿找到我想要的。 那是本身在自己的聊以自慰工具包中使用的东西,但不是你在普通行使中格外供给的事物。
自个儿创设了三个工具包来扶助笔者在Sass中存款和储蓄和操作颜色。 在变量中积累颜色也许是其他预管理器最广大的用例。 大好些个人做如此的事体:

CSS 预管理器中的循环

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

本文由 伯乐在线 - 叙帝利 翻译,黄利民 校稿。未经许可,禁绝转发!
斯拉维尼亚语出处:css-tricks。接待插手翻译组。

如果您看过老的科学幻想电影,你早晚知道循环的无敌之处。给您的机器人克星设置极端循环,它就可以放炮,然后机器人灰飞烟灭了。

预管理器的巡回并不会在太空中爆发刚烈爆炸(作者愿意),不过它平价书写 D普拉多Y 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,可是 早就有人在您此前那样做了

展位图

我们无法不创建自身的 @ array-get mixin来选择键名从数组中寻觅值,然后创立大家的递归while循环以遵从以下路子:

打赏扶持本人翻译越来越多好小说,感谢!

图片 2

1 赞 收藏 评论

循环条件

极致循环是一件很可怕的事情。 如若您不当心,Infiniti循环可能会减慢或令你的编写翻译器崩溃。 那正是干什么循环应该总是提供限制规范的目标 —— 日常由八个增量重复或对象会集定义。

递增的 for 循环

展位图

Less未有放置的数组变量,但大家能够通过创办贰个对列表来模拟同样的意义,就像大家对社交媒体颜色所做的同等:

遍历集合的 ``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 中,你做每件事都会碰到困难(原来的书文商量中有广大人建议了反对意见)。那是它的特色。

预管理器循环不会在半空中挑起刚毅的爆炸(笔者梦想),但它们对于编写DEscortY CSS特别有效。 就算我们都在批评的样式库和模块化设计,大部分至关重要向来在CSS选用器那上边。 不管你挑选怎样的缩写格局(BEM,OOCSS,SMACSS,ETC),循环能够扶助维持您的样式更具可读性和可维护性,间接加工到您的代码中。

至于小编:叙帝利

图片 3

每三遍选取都必得是二回超过,不然就不要选择;每叁回放弃都必需是二遍升高,不然就无须吐弃。 个人主页 · 作者的篇章 · 16 ·    

图片 4

巡回增量

For循环能够运转重复放肆数量,而不只是对象的尺寸。 您能够利用它来创建网格布局(从1到12的列),循环通过色轮(色调从1到360),大概为富有nth-childdiv转移内容编号。
让我们初始一个循环生成叁十几个div元素,每个div提供数字和背景颜色,使用:nth-child
Sass提供了三个独特的for循环语法:@for $ count$ start$ finish,其中$ start和$ finish都以整数。 固然起初值相当大,Sass将向下计数实际不是提高计数。

作者们将看看循环能够做什么样,以至哪些在重要的CSS预管理器中使用它们:Sass,Less和Stylus。 各样语言都提供了一种特别的语法,但他俩都产生了劳作。 有不仅仅一种格局来循环一头猫。

代码展位

定制头像

在OddBird,我们这几天安顿了八个包含默许客户头像的应用程序 - 但大家盼望默许值尽大概的唯一。 最终,大家只安插了八个特殊的Logo,并使用循环将它们转变来1297个例外的头像,所以半数以上客户恒久不拜望到重复的头像。
各类头像有五特个性:

代码展位

将它转变为LessStylus都是一律的覆辙,不再去过多显示了。

代码展位

through关键字表示我们的轮回将囊括数字36.你还能利用to最主要字,在那之中不满含最终计数器:@for $i from 1 to 36将只循环31遍。

Stylus具备与递增类似的语法,然则tothrough分级替换为.....

代码展位

  • 发端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中的结果为:

代码展位

Stylus还提供了二个range()函数,它同意你改动几个增量的分寸。 在限定(0,360,10)中应用色调就要历次重复时将计数扩展10。
Less非得再度使用递归混合宏(recursive mixins)去贯彻。 我们可以为迭代次数(@i)创设二个参数,使用 when(@i> 0)界定规范,并在每一遍迭代时减去四个 —— 以使其像三个递减的for-loop:

展位图

当今颜色可以用二个变量去成功达成,我能够利用另八个周而复始来生成自个儿的调色板。 这里有三个火速示例Sass:

展位图

本身深信不疑你能够比作者做的越来越好。

总结

假诺您不明确哪些时候在代码中运用循环,请介意重复。 你有四个选取器遵从类似的形式,或一个乘除你直接在做? 以下是什么样判断哪些循环是最佳的:
万一您能够列出和命名循环中的项目,使用for-each巡回遍历它们。
假诺重复次数比其他源项目集更关键,也许一旦你须求你的项目编号,请使用for循环。
假如您必要探望具有差别输入的同一循环,请尝试选用递归函数。
对此另外另外(差十分少从未),使用while循环。
一旦你选拔比较少...祝你有幸!
Have fun looping!

相持媒体按键

循环遍历列表或许很有用,但更多时候你想循环遍历对象。 一个广大的例证是为张罗媒体开关分配分化的颜色和图标。 对于列表中的各类门类,大家必要网址的称呼和该社交网络的品牌颜色:
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;
  }
}

本文由时时app平台注册网站发布于web前端,转载请注明出处:CSS预管理器中的循环

关键词: