Sass-@for,@while,@each

最新推荐文章于 2025-07-02 21:09:52 发布

BraveWangDev

最新推荐文章于 2025-07-02 21:09:52 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：【完结】Sass基础知识与应用文章标签： sass

本文链接：https://blog.youkuaiyun.com/ABAP_Brave/article/details/54910444

【完结】Sass基础知识与应用专栏收录该内容

12 篇文章

订阅专栏

本文深入讲解了 Sass 中三种重要的循环语法：@for、@while 和 @each 的用法及其区别。通过实例演示如何利用这些语法来提高 CSS 代码的复用性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本章介绍Sass-@for,@while,@each语法及使用

@charset "utf-8";

//@for
//1-10 包含10
@for $i from 1 through 10{
  .item_#{$i}{
    background-position: -($i - 1) * 20px 0;
  }
}

//1-10 不包含10(1-9)
@for $i from 1 to 10{
  .item_#{$i}{
    background-position: -($i - 1) * 20px 0;
  }
}

// @while
$a:5;

@while($a >= 1){

  .aaa_#{$a}{
    width: 20px * $a;
  }

  $a:$a - 1;
}

// @each
$icon_name:user,pass,checked,select;

@each $i in $icon_name{
  .icon_#{$i}{
    width: 10px;
  }
}

sass编译后

.item_1 {
  background-position: 0px 0; }

.item_2 {
  background-position: -20px 0; }

.item_3 {
  background-position: -40px 0; }

.item_4 {
  background-position: -60px 0; }

.item_5 {
  background-position: -80px 0; }

.item_6 {
  background-position: -100px 0; }

.item_7 {
  background-position: -120px 0; }

.item_8 {
  background-position: -140px 0; }

.item_9 {
  background-position: -160px 0; }

.item_10 {
  background-position: -180px 0; }

.item_1 {
  background-position: 0px 0; }

.item_2 {
  background-position: -20px 0; }

.item_3 {
  background-position: -40px 0; }

.item_4 {
  background-position: -60px 0; }

.item_5 {
  background-position: -80px 0; }

.item_6 {
  background-position: -100px 0; }

.item_7 {
  background-position: -120px 0; }

.item_8 {
  background-position: -140px 0; }

.item_9 {
  background-position: -160px 0; }

.aaa_5 {
  width: 100px; }

.aaa_4 {
  width: 80px; }

.aaa_3 {
  width: 60px; }

.aaa_2 {
  width: 40px; }

.aaa_1 {
  width: 20px; }

.icon_user {
  width: 10px; }

.icon_pass {
  width: 10px; }

.icon_checked {
  width: 10px; }

.icon_select {
  width: 10px; }