scss-@each指令
一、@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指令的更多相关文章
- SCSS 简要教程(常用指令与方法)
Sass是成熟.稳定.强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能. 特性概览 CSS书写代码规模较大的Web应用时,容易造 ...
- 前端scss的使用及gulp发布方式
如标题所述,这篇博文是说scss以及gulp发布方式: 如果你没用过scss和gulp或不甚了解,你可以看看这篇博文,叙说的水平有限,各位看官大神见谅: 说scss之前,先来说说sass,sass是一 ...
- scss 学习笔记
由于没有办法在网络上找到适合顾客的模板,同时之前自己写css也没有很好的管理方式,最终选择了scss. Nested #main p { color: #00ff00; width: 97%; .re ...
- vue-cli 自定义指令directive 添加验证滑块
vue项目注册登录页面遇到了一个需要滑块的功能,网上看了很多插件发现都不太好用,于是自己写了一个插件供大家参考: 用的是vue的自定义指令direcive,只需要在需要的组件里放入对应的标签嵌套即可: ...
- scss 编译方法
第一种: 手动创建 scss文件夹 用Node.js command promt 进入项目目录 在项目目录下面 输入 sass scss/main.scss css/main.css s ...
- Scss预处理器的使用总结
变量 .嵌套.Mixin混合.function函数.插值 变量及文件导入 通过$定义变量 $white:#fff; $black:#000; 变量引用 .containner{ color:$blac ...
- css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)
什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...
- Scss 与 Sass 是什么,他们的区别在哪里?
转载自:http://yunkus.com/difference-between-scss-sass/ 要想了解Scss 与 Sass 是什么以及他们的区别又在哪里,我们不过不先从他们各自的定义说起. ...
- Scss - 简单笔记
原文链接:scss 教程 手头上疯狂在用 scss,虽然可以在里面写原生的 css, 但是为了保持风格的一致性,还是滚去看了看 scss 文档. 一.变量 变量的引入是 scss 的一个核心特性,变量 ...
- Angular使用总结 --- 通过指令动态添加组件
之前自己写的公共组件,都是会先引入,需要调起的时候再通过service控制公共组件状态.值.回调函数什么的.但是有一些场景不适合这种方式,还是动态添加组件更加好.通过写过的一个小组件来总结下. 创建组 ...
随机推荐
- python3入门之字典
获得更多资料欢迎进入我的网站或者 csdn或者博客园 本节主要介绍字典,字典也成映射,时python中唯一内建的映射类型.更多详细请点击readmore.下面附有之前的文章: python入门之字符串 ...
- docker 自定义镜像
step1:自定义镜像 原镜像 registry.aspider.avlyun.org/library/php-apache docker run -d --name xz_apache regist ...
- C++20草案中的宇宙飞船运算符(<=>,spaceship operator)
C++20草案中的宇宙飞船运算符(<=>,spaceship operator) Herb Sutter提议的新三路运算符<=>已经被合入C++20草案中. 宇宙飞船运算符(h ...
- 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 ...
- 主机和虚拟机互Ping的问题
主机能ping通虚拟机,虚拟机能ping不通主机. 发现原来是被防火墙阻止了.打开主机防火墙禁止Ping的方式. 在ping不通的电脑上对防火墙进行如下设置:依次单击“防火墙”—“高级设置”—“入站规 ...
- vue脚手架的安装和使用
脚手架安装:
- CentOS 7 开放防火墙端口 命令(转载)
CentOS 7 开放防火墙端口 命令 最近公司新的server要求用CentOS7, 发现以前CentOS 6 系列中的 iptables 相关命令不能用了,查了下,发现Centos 7使用fire ...
- Joi图标
刚开始浏览API的时候,旁边这个图片还真没明白是啥意思.现在才明白过来:),检测工具嘛,哈哈.
- python-继承,父类,子类
class Spell(object): def __init__(self, incantation, name): self.name = name self.incantation = inca ...
- [转] Angular 4.0 内置指令全攻略
[From] https://segmentfault.com/a/1190000010416792 简书链接 在这篇文章中,我们将分别列举每一个内置指令的用法,并提供一个例子作为演示.尽量用最少最简 ...