章节
问答
笔记
评论
占位
占位

@for循环 (下)

上一小节的那个实例几乎用不着,哈哈,所以其实是没什么营养的东西,只是帮助理解了原来 @for 是这么回事。怎么的也不能就这么忽悠大家啊,大家好不容易抽空看下文章,就这么点扯淡的东西怎么对得住呢。下面再来个营养级别的,@for应用在网格系统生成各个格子 class 的代码:

//SCSS 
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}

编译出来的 CSS:

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.span1 {
  width: 60px;
}

.span2 {
  width: 140px;
}

.span3 {
  width: 220px;
}

.span4 {
  width: 300px;
}

.span5 {
  width: 380px;
}

.span6 {
  width: 460px;
}

.span7 {
  width: 540px;
}

.span8 {
  width: 620px;
}

.span9 {
  width: 700px;
}

.span10 {
  width: 780px;
}

.span11 {
  width: 860px;
}

.span12 {
  width: 940px;
}

将上面的示例稍做修改,将 @for through 方式换成 @for to::

//SCSS
@for $i from 1 to 13 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}

其最终编译出来的 CSS 代码和上例所编译出来的一模一样。

这两段 Sass 代码并无太多差别,只是 @for中的 <end> 取值不同。配合 through 的 <end> 值是 12,其遍历出来的终点值也是 12,和 <end> 值一样。配合 to 的 <end> 值是 13,其遍历出来的终点值是 12,就是 <end> 对就的值减去 1 。

任务

小伙伴们,现在让我们来练习一下@for循环的用法吧!

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?