scss-@each指令-白红宇的个人博客

scss-@each指令

发布日期：2021-10-10 17:30:37 浏览次数：2 分类：技术文章

本文共 1444 字，大约阅读时间需要 4 分钟。

　　一、@each指令实例

　　在@each变量的定义，其中包含的每个项目的列表中的值。

　　语法：

@each $var in

　　语法简要说明如下。

$var: 它代表了变量的名称。 @each规则将 $var 每个项目在列表中使用 $var 值输出样式。

<list 或 map>: 这是 SassScript 表达式这将返回一个列表或映射。scss

　　scss代码实例：

@each $color in red, green, yellow, blue {
     .p_#{$color} {
       background-color: #{$color};  }}

　　编译后的css结果为：

.p_red {
     background-color: red; }.p_green {
     background-color: green; }.p_yellow {
     background-color: yellow; }.p_blue {
     background-color: blue; }

　　二、@each多重分配

　　多个值也可以用 @each 指令中使用。如， $var1, $var2,$var3, ... 在 <list>.

　　语法：

@each $var1, $var2, $var3 ... in

　　语法简要说明如下。

$var1, $var2 和 $var3: 这些代表变量的名称。

<list>: 它代表列表的列表，每个变量将持有子列表的元素。

　　scss代码实例:

@each $color, $border in (aqua, dotted),                        (red, solid),                        (green, double){
     .#{$color} {
       background-color : $color;    border: $border;  }}

　　编译后的css代码：

.aqua {
     background-color: aqua;  border: dotted; }.red {
     background-color: red;  border: solid; }.green {
     background-color: green;  border: double; }

　　三、@each多重分配与映射

　　多重任务可以很好地处理映射，他们被认为是列表对。如果你想使用映射，那么必须改变@each声明和使用多个任务。

　　语法：

@each $var1, $var2 in

　　语法简要说明如下。

$var1, $var2: 这些代表变量的名称

<map>: 它表示列表对

　　scss代码实例：

@each $header, $color in (h1: red, h2: green, h3: blue) {
     #{$header} {
       color: $color;  }}

　　编译后的css代码如下：

h1 {
     color: red; }h2 {
     color: green; }h3 {
     color: blue; }

更多专业前端知识，请上

【猿2048】www.mk2048.com

转载地址：https://blog.csdn.net/qq_29069777/article/details/102210364 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：scss-比较运算符

下一篇：html-html简介

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章