一、@each指令实例

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

  语法:

@each $var in <list or map>
  语法简要说明如下。
  • $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 <list>
  语法简要说明如下。
  • $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 <map>
  语法简要说明如下。
  • $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;
}

scss-@each指令的更多相关文章

  1. SCSS 简要教程(常用指令与方法)

    Sass是成熟.稳定.强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能. 特性概览 CSS书写代码规模较大的Web应用时,容易造 ...

  2. 前端scss的使用及gulp发布方式

    如标题所述,这篇博文是说scss以及gulp发布方式: 如果你没用过scss和gulp或不甚了解,你可以看看这篇博文,叙说的水平有限,各位看官大神见谅: 说scss之前,先来说说sass,sass是一 ...

  3. scss 学习笔记

    由于没有办法在网络上找到适合顾客的模板,同时之前自己写css也没有很好的管理方式,最终选择了scss. Nested #main p { color: #00ff00; width: 97%; .re ...

  4. vue-cli 自定义指令directive 添加验证滑块

    vue项目注册登录页面遇到了一个需要滑块的功能,网上看了很多插件发现都不太好用,于是自己写了一个插件供大家参考: 用的是vue的自定义指令direcive,只需要在需要的组件里放入对应的标签嵌套即可: ...

  5. scss 编译方法

    第一种: 手动创建 scss文件夹  用Node.js command promt  进入项目目录  在项目目录下面 输入  sass scss/main.scss css/main.css    s ...

  6. Scss预处理器的使用总结

    变量 .嵌套.Mixin混合.function函数.插值 变量及文件导入 通过$定义变量 $white:#fff; $black:#000; 变量引用 .containner{ color:$blac ...

  7. css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)

    什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...

  8. Scss 与 Sass 是什么,他们的区别在哪里?

    转载自:http://yunkus.com/difference-between-scss-sass/ 要想了解Scss 与 Sass 是什么以及他们的区别又在哪里,我们不过不先从他们各自的定义说起. ...

  9. Scss - 简单笔记

    原文链接:scss 教程 手头上疯狂在用 scss,虽然可以在里面写原生的 css, 但是为了保持风格的一致性,还是滚去看了看 scss 文档. 一.变量 变量的引入是 scss 的一个核心特性,变量 ...

  10. Angular使用总结 --- 通过指令动态添加组件

    之前自己写的公共组件,都是会先引入,需要调起的时候再通过service控制公共组件状态.值.回调函数什么的.但是有一些场景不适合这种方式,还是动态添加组件更加好.通过写过的一个小组件来总结下. 创建组 ...

随机推荐

  1. python3入门之字典

    获得更多资料欢迎进入我的网站或者 csdn或者博客园 本节主要介绍字典,字典也成映射,时python中唯一内建的映射类型.更多详细请点击readmore.下面附有之前的文章: python入门之字符串 ...

  2. docker 自定义镜像

    step1:自定义镜像 原镜像 registry.aspider.avlyun.org/library/php-apache docker run -d --name xz_apache regist ...

  3. C++20草案中的宇宙飞船运算符(<=>,spaceship operator)

    C++20草案中的宇宙飞船运算符(<=>,spaceship operator) Herb Sutter提议的新三路运算符<=>已经被合入C++20草案中. 宇宙飞船运算符(h ...

  4. Elements in iteration expect to have 'v-bind:key' directives错误的解决办法

    一.错误如下 [eslint-plugin-vue][vue/require-v-for-key]Elements in iteration expect to have 'v-bind:key' d ...

  5. 主机和虚拟机互Ping的问题

    主机能ping通虚拟机,虚拟机能ping不通主机. 发现原来是被防火墙阻止了.打开主机防火墙禁止Ping的方式. 在ping不通的电脑上对防火墙进行如下设置:依次单击“防火墙”—“高级设置”—“入站规 ...

  6. vue脚手架的安装和使用

    脚手架安装:

  7. CentOS 7 开放防火墙端口 命令(转载)

    CentOS 7 开放防火墙端口 命令 最近公司新的server要求用CentOS7, 发现以前CentOS 6 系列中的 iptables 相关命令不能用了,查了下,发现Centos 7使用fire ...

  8. Joi图标

    刚开始浏览API的时候,旁边这个图片还真没明白是啥意思.现在才明白过来:),检测工具嘛,哈哈.

  9. python-继承,父类,子类

    class Spell(object): def __init__(self, incantation, name): self.name = name self.incantation = inca ...

  10. [转] Angular 4.0 内置指令全攻略

    [From] https://segmentfault.com/a/1190000010416792 简书链接 在这篇文章中,我们将分别列举每一个内置指令的用法,并提供一个例子作为演示.尽量用最少最简 ...