CSS 预处理器赋予了 CSS 逻辑编程的能力,其中 Sass、Less、Stylus
最受欢迎,语法都是大同小异,上手也很快。在项目中使用最多的可能要数 Sass 了,本文就讲讲 Sass 中循环遍历 @each
、@for
和 @if
判断的搭配使用。
一、@for
@for
语法需要搭配 from
和 through
关键字使用,eg:
1 | @for $index from 1 through 5 { |
编译后生成:
1 | .box-bg-1 { |
二、 @for
搭配 nth
内置函数循环遍历取值
nth
内置函数的作用:可以使用@for
循环的下标index
获取对应list
的值。
1 | @use "sass:list"; |
编译后生成:
1 | .annotator-hl-1 { |
三、@each
@each
语法需要 list
类似于 JS
中 Array
数语的结构,可以先声明一个数组 list
变量,eg:
1 | $states: 'before', 'ing', 'after'; |
编译后生成:
1 | .box .before { |
注意:
- 其中做了一个 @if 判断,当变量
$name == 'after'
时,把变量赋值为before
; - 当变量和字符串拼接时,一定要使用
#{$var}
的形式(类似ES6中的模板字符串),否则编译会报错。
欢迎访问:天问博客
本文作者: Tiven
发布时间: 2022-08-15
最后更新: 2023-05-19
本文标题: Sass中each、for、if的搭配使用
本文链接: https://www.tiven.cn/p/d5fe863/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
发布时间: 2022-08-15
最后更新: 2023-05-19
本文标题: Sass中each、for、if的搭配使用
本文链接: https://www.tiven.cn/p/d5fe863/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!