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控制公共组件状态.值.回调函数什么的.但是有一些场景不适合这种方式,还是动态添加组件更加好.通过写过的一个小组件来总结下. 创建组 ...
随机推荐
- equals hashcode toString 方法的使用
package com.wu.toString; import java.util.Date; import java.util.GregorianCalendar; /** * * @author ...
- GG and MM HDU - 3595 Every-SG
$ \color{#0066ff}{ 题目描述 }$ 两堆石子,GG和MM轮流取,每次在一堆石子中取另一堆石子的k\((k\ge1)\)倍,不能操作的输 现在二人要玩n个这样的游戏,每回合每个人对每个 ...
- 修改两行代码,让nginx支持phpinfo模式
Nginx服务器默认不支持pathinfo, 在需要pathinfo支持的程序中(如thinkphp),则无法支持”/index.php/Home/Index/index”这种网址. 网上流传的解决办 ...
- 按钮重复点击问题 UIbutton
.h #import <UIKit/UIKit.h> #import <objc/runtime.h> @interface UIControl (XY) @property ...
- HDU - 3652 数位DP 套路题
题意:统计能被13整除和含有13的数的个数 解法没法好说的..学了前面两道直接啪出来了 PS.HDU深夜日常维护,没法交题,拿网上的代码随便对拍一下,输出一致 #include<bits/std ...
- Mysql5.7不区分大小写设置
1.编辑mysql配置文件my.cnf 2.在[mysqld]下添加一行 lower_case_table_names=1#0表示区分大小写,1表示不区分大小写
- Flutter编程:Flutter命令行的学习
1.创建 Flutter 工程 flutter create <output directory> D:\notebook\flutter\projects\ui_tutorial\lay ...
- Tomcat疑难杂症解决记录
1. startup.bat闪退 cmd中运行startup.bat报错: The JRE_HOME environment variable is not defined correctly Thi ...
- RabbitMQ之消息持久化
消息的可靠性是RabbitMQ的一大特色,那么RabbitMQ是如何保证消息可靠性的呢——消息持久化. 为了保证RabbitMQ在退出或者crash等异常情况下数据没有丢失,需要将queue,exch ...
- Python学习 day03
一.基本数据类型 python中的基本数据类型有以下几种: int -- 整数 python3中默认整数都是int型,python2中int的范围为-231~232-1(32位系统中)/ ...