Sass 循环语句
本节我们学习 Sass 中的循环语句,Sass 中的循环语句可以使用 @for
指令和 @while
指令来实现。
@for指令
@for
指令可以用于循环生成样式,@for
指令有两种类型,如下所示:
// 第一种 @for $i from <start> through <end> // 第二种 @for $i from <start> to <end>
其中 $i
表示变量,start
表示起始值,end
表示结束值。其实这两种方式的区别就在于,使用关键字 through
时会包括 end
这个数,而使用关键字 to
则不会包括 end
这个数。
示例:
如下代码,使用 through
关键字实现 @for
循环:
@for $i from 1 through 3{ .width#{$i} { width: $i * 10px; } }
编译成 CSS 代码:
.width1 { width: 10px; } .width2 { width: 20px; } .width3 { width: 30px; }
上述代码中,循环一共循环了三次,从 $i
的值为 1 开始循环,一直到 3 结束,并且包括了 3。
示例:
然后我们再来看一下 to
关键字的使用:
@for $i from 1 to 3{ .width#{$i} { width: $i * 10px; } }
编译后的 CSS 代码:
.width1 { width: 10px; } .width2 { width: 20px; }
和 through
关键字不同,to
关键字的循环虽然也是从 $i
的值为 1 开始循环,但是不包括 3 ,所以整个循环只循环两遍。
@while指令
@while
指令也可以用于循环样式,后面接 SassScript 表达式,循环会一直到表达式的值为 false
时停止。
示例:
循环遍历12px、14px、16px
的字体样式:
$num: 12; @while $num < 18 { .f-#{$num} { font-size: #{$num}px; } $num: $num + 2; }
编译成 CSS 代码:
.f-12 { font-size: 12px; } .f-14 { font-size: 14px; } .f-16 { font-size: 16px; }
变量 $num
的初始值为 12,首先会输出 font-size:12px
样式,然后每次循环都会在原有的基础上加 2,一直到 不满足 $num < 18
这个条件,则循环会停止执行。
@each 指令
@each
指令可以用于遍历一个列表,然后从列表中取出对应的值。
语法:
@each $i in <list>
$i
就是一个变量名,<list>
是一个 SassScript 表达式,返回一个列表值。
示例:
$list: 5 10 15 20 25; @each $i in $list { .p-#{$i}{ padding: #{$i}px; } }
编译成 CSS 代码:
.p-5 { padding: 5px; } .p-10 { padding: 10px; } .p-15 { padding: 15px; } .p-20 { padding: 20px; } .p-25 { padding: 25px; }
可以看到上述代码中,我们遍历了定义好的 $list
中的5个值,一直到列表中的值遍历完后,循环才会停止。

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
【SpringCloud技术专题】「Hystrix」(3)超时机制的原理和实现
[每日一句] 也许你度过了很糟糕的一天,但这并不代表你会因此度过糟糕的一生。 [温馨提示] 承接上一篇文章🏹「Hystrix」(2)参数配置的详细介绍 在这里推荐给大家martinfowler的熔断器介绍和权威指南,有兴趣的小伙伴们可以研究一下哈。 主要介绍相关:官网说明 关于 【Hystrix如何运行的介绍】的介绍 [背景介绍] 分布式系统的规模和复杂度不断增加,随着而来的是对分布式系统可用性的要求越来越高。在各种高可用设计模式中,【熔断、隔离、降级、限流】是经常被使用的。而相关的技术,Hystrix本身早已算不上什么新技术,但它却是最经典的技术体系!。 Hystrix以实现熔断降级的设计,从而提高了系统的可用性。 Hystrix是一个在调用端上,实现断路器模式,以及隔舱模式,通过避免级联故障,提高系统容错能力,从而实现高可用设计的一个Java服务组件库。 Hystrix实现了资源隔离机制 前提介绍 Hystrix的超时检测本质上通过启动单独线程去检测的,线程的执行的时间刚好就是任务超时的时间,本质上就是这么个简单的逻辑。 Hystrix超时后会抛出一个HystrixTimeout...
- 下一篇
企业级开源意在加速开放混合云
如今,几乎所有的企业都在拥抱开源。这是一件好事,说明整个世界正在走向开源、开放,会加快实现数字化转型目标。问题是,什么是开源,企业开源和社区开源有到底有啥区别? 所谓“开源”,即开放代码,与过去传统的商业软件模式好像背道而驰,传统商业软件更强调私有和转型特性。当然,在开源浪潮的推动下,传统软件也在改变路线,积极拥抱开源。虽然,开源好像看上去已经统一了整个世界,但也有小的细分,除了技术路线的不同分支,还有商业模式的区别,大体被分为企业级开源和社区开源。 什么企业级开源?答案是,以红帽为代表的开源企业,以企业用户为服务对象,将最新的社区开源技术与源代码进行优选和产品化,并以企业级全生命周期产品为辅助支持,同时提供开源技术和方案咨询、实施、培训等服务,满足企业稳定性与创新能力的双重需求。而社区开源比较好理解,就是让企业或个人开发者通过参与上游开源社区,获得最新的开源技术与源代码支持,通过自服务或社区的支持促进企业的数字化发展。 社区开源虽然秉承的是“我为人人,人人为我”的技术理念,但也有一个明显的弊端,就是自服务能力差,当用户碰到一些安全漏洞、补丁缺失的问题时,无法得到企业资源的支持,可能会...
相关文章
文章评论
共有0条评论来说两句吧...