>

预处理器中的循环

- 编辑:至尊游戏网站 -

预处理器中的循环

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,可是 业本来就有人在你前边那样做了

循环条件

星际迷航并不是全盘假造。即使您比不小心,Infiniti循环恐怕会使编译器变得卡顿或许损坏编写翻译器。纵然那不是清除邪恶机器人的好方法,然而它会负气使用你代码的人。所以循环的应用是有限度的——平时是由局地依次增加的循环体大概目的集结定义。在编制程序术语中:

  1. While 循环是通用的,循环一贯运营直到满足条件。请小心!这里轻易现身不过循环。
  2. For 循环是比比都已的,运营特定数量的循环体。
  3. For-Each 循环遍历群集大概列表,每一趟循环大器晚成项。

上述循环的行使范围依次依次减少。for-each 循环是 for 循环的意气风发种样式, 它们也是 while 循环的风流倜傥种样式。不过超级多的接收境况大概需求更有声有色的归类。小编很难在事实上中国人民解放军海军事工业程大学业作中找到 while 循环——大比超多例证使用 for 或者 for-each 管理的越来越好。所以 Stylus 只提供了后世的语法。Sass 的语准绳提供了那二种办法,而 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 中,你做每件事都会蒙受困难(最早的作品商量中有许四人建议了辩驳意见)。那是它的表征。

周旋媒体开关

遍历列表很有用,不过洋洋时候你想遍历对象。二个常见的事例正是给张罗媒体按键增添不一致的水彩和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.

递增的 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.

栅格系统

自家经常在空洞的 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.

特种的头像

在 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 的代码。笔者曾经看腻了。

通用的 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.

本身深信您能够比自身做的更了不起。

Getting Loopy!

要是你不明了该怎么时候利用循环,时刻检点循环体。你是还是不是有恢宏依照平等模式的选用器,或许另行的精兵简政?上面告诉您什么样判定哪些循环是最佳的:

  1. 倘令你能够列出并取名循环中的项目,使用 for-each 遍历。
  2. 若是循环的次数比循环体本人主要,也许生机勃勃旦你需求给每生龙活虎项编号,请使用 for 循环。
  3. 假若您供给拜见同五个巡回,只是输入值分歧,尝试递归函数。
  4. 对于别的境况(差相当的少根本不曾),使用 while 循环。
  5. 生龙活虎经您利用 Less… 祝你恰巧!

尽情的享受循环呢!

打赏扶持小编翻译越多好随笔,多谢!

打赏译者

打赏扶助本人翻译越多好小说,谢谢!

至尊游戏网站 1

1 赞 收藏 评论

关于小编:叙帝利

至尊游戏网站 2

每回接收都不得不是一遍当先,不然就无须筛选;每一次扬弃都必需是一次提升,不然就不要丢掉。 个人主页 · 小编的篇章 · 16 ·    

至尊游戏网站 3

本文由设计建站发布,转载请注明来源:预处理器中的循环