一、@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. equals hashcode toString 方法的使用

    package com.wu.toString; import java.util.Date; import java.util.GregorianCalendar; /** * * @author ...

  2. GG and MM HDU - 3595 Every-SG

    $ \color{#0066ff}{ 题目描述 }$ 两堆石子,GG和MM轮流取,每次在一堆石子中取另一堆石子的k\((k\ge1)\)倍,不能操作的输 现在二人要玩n个这样的游戏,每回合每个人对每个 ...

  3. 修改两行代码,让nginx支持phpinfo模式

    Nginx服务器默认不支持pathinfo, 在需要pathinfo支持的程序中(如thinkphp),则无法支持”/index.php/Home/Index/index”这种网址. 网上流传的解决办 ...

  4. 按钮重复点击问题 UIbutton

    .h #import <UIKit/UIKit.h> #import <objc/runtime.h> @interface UIControl (XY) @property ...

  5. HDU - 3652 数位DP 套路题

    题意:统计能被13整除和含有13的数的个数 解法没法好说的..学了前面两道直接啪出来了 PS.HDU深夜日常维护,没法交题,拿网上的代码随便对拍一下,输出一致 #include<bits/std ...

  6. Mysql5.7不区分大小写设置

    1.编辑mysql配置文件my.cnf 2.在[mysqld]下添加一行 lower_case_table_names=1#0表示区分大小写,1表示不区分大小写

  7. Flutter编程:Flutter命令行的学习

    1.创建 Flutter 工程 flutter create <output directory> D:\notebook\flutter\projects\ui_tutorial\lay ...

  8. Tomcat疑难杂症解决记录

    1. startup.bat闪退 cmd中运行startup.bat报错: The JRE_HOME environment variable is not defined correctly Thi ...

  9. RabbitMQ之消息持久化

    消息的可靠性是RabbitMQ的一大特色,那么RabbitMQ是如何保证消息可靠性的呢——消息持久化. 为了保证RabbitMQ在退出或者crash等异常情况下数据没有丢失,需要将queue,exch ...

  10. Python学习 day03

    一.基本数据类型 python中的基本数据类型有以下几种: int   --  整数     python3中默认整数都是int型,python2中int的范围为-231~232-1(32位系统中)/ ...