[移动开发] Scss 遍历之批量设置样式

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> Scss 遍历之批量设置样式 -> 正文阅读

[移动开发]Scss 遍历之批量设置样式

@for

这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 <start> 与 <end>的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end>的值。

@for $var from 1 through 3 {
  $dis: $var * 10 + px;
  .mt-#{$var} {
    margin-top: $dis;
  }
}

编译后

.mt-1 {
  margin-top: 10px;
}
.mt-2 {
  margin-top: 20px;
}
.mt-3 {
  margin-top: 30px;
}

引入样式后，即可在页面中使用了

<div class="mt-2"></div>

通过@for可以快速的定义一些公共样式，非常方便

@each

指令格式为$var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而 <list> 是一连串的值，也就是值列表。

$colors: lightgoldenrodyellow, lightblue, lightgray, lightgreen;

@each $c in $colors {
  $i: index($colors, $c); // 索引
  .box:nth-child(#{$i}) {
    background-color: $c;
  }
}