Sass-@for,@while,@each

来源：互联网发布：pywin32 知乎编辑：程序博客网时间：2024/06/05 03:47

本章介绍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; }

0 0