Erlo

Sass 循环语句

时间:2021-06-14   阅读:63次   来源:开源中国
页面报错
点赞

本节我们学习 Sass 中的循环语句,Sass 中的循环语句可以使用 @for 指令和 @while 指令来实现。

@for指令

@for 指令可以用于循环生成样式,@for 指令有两种类型,如下所示:

// 第一种
@for $i from  through 
    
// 第二种
@for $i from  to 

其中 $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 

$i 就是一个变量名, 是一个 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个值,一直到列表中的值遍历完后,循环才会停止。

提交留言

评论留言

还没有评论留言,赶紧来抢楼吧~~

吐槽小黑屋()

* 这里是“吐槽小黑屋”,所有人可看,只保留当天信息。

  • Erlo吐槽

    Erlo.vip2021-09-24 23:29:34Hello、欢迎使用吐槽小黑屋,这就是个吐槽的地方。
  • 返回顶部

    给这篇文章打个标签吧~

    棒极了 糟糕透顶 好文章 PHP JAVA JS 小程序 Python SEO MySql 确认