@each 指令 介绍
@each 指令的格式是
$var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而<list>是一连串的值，也就是值列表（注意不是数组）。
@each 将变量 $var 作用于值列表中的每一个项目，然后输出结果，例如：
1. 单个数据示例
@each $animal in puma, sea-slug, egret, salamander {
.#{
$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
编译为
.puma-icon {
background-image: url('/images/puma.png'); }
.sea-slug-icon {
background-image: url('/images/sea-slug.png'); }
.egret-icon {
background-image: url('/images/egret.png'); }
.salamander-icon {
background-image: url('/images/salamander.png'); }
2. 多个数据示例
【1】
@each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {
.#{
$animal}-icon {
background-image: url('/images/#{$animal}.png');
border: 2px solid $color;
cursor: $cursor;
}
}
编译后
.puma-icon {
background-image: url('/images/puma.png');
border: 2px solid black;
cursor: default;
}
.sea-slug-icon {
background-image: url('/images/sea-slug.png');
border: 2px solid blue;
cursor: pointer;
}
.egret-icon {
background-image: url('/images/egret.png');
border: 2px solid white;
cursor: move;
}
【2】
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{
$header} {
font-size: $size;
}
}
编译后
h1 {
font-size: 2em; }
h2 {
font-size: 1.5em; }
h3 {
font-size: 1.2em; }
@each 指令 - demo
页面展示
代码示例
<template>
<div>
<div class="content">
<div class="item" v-for="(item, index) in [...Array(7).keys()]" :key="index">
{
{ `第${item + 1}行` }}
</div>
</div>
</div>
</template>
<style lang='scss' scoped>
$height: 30px;
// 1.遍历一组数据
$colorList: red, orange, yellow, green, #4646b6, blue, purple;
// 2.遍历多组数据（不可行 - 写法有问题）
$itemIndexList: 1, 2, 3, 4, 5, 6, 7;
$fontSizeList: 12px, 13px, 14px, 15px, 16px, 17px, 18px;
$fontColorList: purple, red, orange, yellow, green, #4646b6, blue;
// 3.遍历多组数据（可行）
$one: 1, 12px, purple;
$two: 2, 13px, red;
$three: 3, 14px, orange;
$four: 4, 15px, yellow;
$five: 5, 16px, green;
$six: 6, 17px, #4646b6;
$seven: 7, 18px, blue;
// 4.遍历多组数据（可行）- 换一种写法更清晰
$moreDataList: (1, 12px, purple), (2, 13px, red), (3, 14px, orange), (4, 15px, yellow), (5, 16px, green), (6, 17px, #4646b6), (7, 18px, blue);
.content {
width: 200px;
margin: 0 auto;
.item {
width: 100%;
height: $height;
line-height: $height;
border-radius: 5px;
border: 1px solid red;
margin-bottom: 10px;
/**** 1.遍历一组数据 start ****/
@each $color in $colorList {
$index: index($colorList, $color); // 获取当前颜色对应索引
&:nth-child(#{
$index}) {
background-color: $color;
}
}
/**** 1.遍历一组数据 end ****/
/**** 2.遍历多组数据（不可行） start ****/
// 多组数据时不是像数组那样一个一个遍历
// @each $itemIndex, $fontSize, $fontColor in ($itemIndexList), ($fontSizeList), ($fontColorList)
// {
// $calcIndex: index($fontSizeList, $fontSize); // 获取当前颜色对应索引
// // &:nth-child(#{
$itemIndex}) {
// &:nth-child(1) {
// font-size: $fontSize;
// color: $fontColor;
// border: $itemIndex;
// margin: $calcIndex;
// }
// }
/**** 2.遍历多组数据（不可行） end ****/
/**** 3.遍历多组数据（可行） start ****/
// @each $itemIndex, $fontSize, $fontColor in ($one), ($two), ($three), ($four), ($five), ($six), ($seven)
// {
// &:nth-child(#{
$itemIndex}) {
// font-size: $fontSize;
// color: $fontColor;
// }
// }
/**** 3.遍历多组数据（可行） end ****/
/**** 4.遍历多组数据（可行）- 换一种写法更清晰（手写索引） start ****/
// @each $itemIndex, $fontSize, $fontColor in $moreDataList {
// // $calcIndex: index($moreDataList, ($itemIndex $fontSize $fontColor)); // 这样取不到索引
// // $ceshiIndex: index($colorList, purple); // 只能这样取索引（数据是单个的，不是多个）× 可以去多个数据的索引，如5示例
// &:nth-child(#{
$itemIndex}) {
// // &:nth-child(#{
$calcIndex}) {
// font-size: $fontSize;
// color: $fontColor;
// // margin: $calcIndex + 1; // 值一直是1，$calcIndex没有值
// // padding: $ceshiIndex; // 7
// }
// }
/**** 4.遍历多组数据（可行）- 换一种写法更清晰（手写索引） end ****/
/**** 5.遍历多组数据（可行）- 换一种写法更清晰（获取索引） start ****/
@each $itemIndex, $fontSize, $fontColor in $moreDataList {
/* $calcIndex: index($moreDataList, ($itemIndex $fontSize $fontColor)); */ // 这样取不到索引
/* $calcIndex: index((1, 12px, purple) (2, 13px, red) (3, 14px, orange) (4, 15px, yellow) (5, 16px, green) (6, 17px, #4646b6) (7, 18px, blue), (4, 15px, yellow)) */ // 这样可以取到索引
$calcIndex: index($moreDataList, ($itemIndex, $fontSize, $fontColor)); // 这样取索引
/* &:nth-child(#{$itemIndex}) { */ // 注释掉，不用自己手写的索引
&:nth-child(#{
$calcIndex}) {
font-size: $fontSize;
color: $fontColor;
margin: $calcIndex + 1px; // $calcIndex有值
}
}
/**** 5.遍历多组数据（可行）- 换一种写法更清晰（获取索引） end ****/
}
}
</style>
单组数据/多组数据 数据的对应关系
index() 函数
index() 函数类似于索引一样，主要用于查找某个值再列表中位置，Sass 中第一个值就是1，第二个是就是2，第三个值就是3 ……
如果在列表中未找到对应的值，则返回 false。
index(1px 2px 3px 4px, 3px) // 3
index(1px solid tomato, 3px) // false
index(1px solid tomato, solid) // 2
自己试过（多个数据获取对应索引）
index((1px solid red) (2px solid orange) (3px solid yellow), (2px solid orange)); // 2
/* 多个数据获取对应索引与 @each 指令共用 ↓↓↓ */
$moreDataList: (1, 12px, purple), (2, 13px, red), (3, 14px, orange), (4, 15px, yellow), (5, 16px, green), (6, 17px, #4646b6), (7, 18px, blue);
@each $itemIndex, $fontSize, $fontColor in $moreDataList {
$calcIndex: index($moreDataList, ($itemIndex, $fontSize, $fontColor)); // 这样取索引
}