scss循環(huán)生成常用動(dòng)態(tài)樣式margin、font-size、color

$pixel: 5, 10, 15, 20, 25, 30, 40, 50;
$positions: top, right, bottom, left;
$position-class: 't', 'r', 'b', 'l';
@each $item in $pixel {
  @each $p in $positions {
    $index: index($positions, $p);
    $class: nth($position-class, $index);
    //使用 .mt-10,.pt-10
    .m#{$class}-#{$item} {
      margin-#{$p}: $item + px;
    }
    .p#{$class}-#{$item} {
      padding-#{$p}: $item + px;
    }
  }
}

$fontSize: 14, 16, 32;
@each $item in $fontSize{
  //使用 .fs-14,.fs-16
  .fs-#{$item} {
    font-size: #{$item}px;
  }
}

//@for $i from 10 through 32{
//  .fs-#{$i}{
//    font-size: #{$i}px;
//  }
//}
$colors: (
        "yellow": "#FFAA00",
        "green": "#00FF00",
        "blue": "#42BEFD"
);

// 使用@each循環(huán)遍歷顏色映射
@each $color-name, $hex-value in $colors {
  // 動(dòng)態(tài)生成類(lèi)名，如.color-blue, .color-green
  .color-#{$color-name} {
    color: #{$hex-value};
  }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容