[SCSS] Loop Over Data with the SCSS @each Control Directive
The SCSS @for directive is great when we know how many iterations are required and we only need 1 variable. What if we need multiple variables to iterate over data sets? Hello SCSS maps and the @each control directive! In this lesson, we’ll check out iterating with lists and looping over data sets with maps and the @each directive.
// work with simple array
$superheroes: wonder-woman, spiderman, batman, superman;
@each $hero in $superheroes {
.#{$hero}-logo {
content: "#{$hero}";
}
} // we get
.wonder-woman-logo {
content: "wonder-woman"; } .spiderman-logo {
content: "spiderman"; } .batman-logo {
content: "batman"; } .superman-logo {
content: "superman"; }
key: value pairs using map-get():
// work with key: value pair
$breakpoints: (sm: 375px, md: 768px, lg: 1200px);
$container-widths: (sm: 250px, md: 500px, lg: 750px);
@each $size, $bp in $breakpoints {
@media only screen and (min-width: $bp) {
.container-width {
// because $breakpoints and $container-widths have the same key
// we can use map_get(target_ary, key) to get value
width: map_get($container-widths, $size);
}
}
} // we get
@media only screen and (min-width: 375px) {
.container-width {
width: 250px; } } @media only screen and (min-width: 768px) {
.container-width {
width: 500px; } } @media only screen and (min-width: 1200px) {
.container-width {
width: 750px; } }
index: values pair using nth()
$hero-media: (1 375px 768px crimson),
(2 768px 1000px darkred),
(3 1200px 1400px grey),
(4 768px 1200px blue); // we get @media only screen and (min-width: 375px) and (max-width: 768px) {
.wonder-woman {
background-color: crimson; } } @media only screen and (min-width: 768px) and (max-width: 1000px) {
.spiderman {
background-color: darkred; } } @media only screen and (min-width: 1200px) and (max-width: 1400px) {
.batman {
background-color: grey; } } @media only screen and (min-width: 768px) and (max-width: 1200px) {
.superman {
background-color: blue; } }
[SCSS] Loop Over Data with the SCSS @each Control Directive的更多相关文章
- [SCSS] Write similar classes with the SCSS @for Control Directive
Writing similar classes with minor variations, like utility classes, can be a pain to write and upda ...
- [SCSS] Write Custom Functions with the SCSS @function Directive
Writing SCSS @functions is similar to writing functions in other programming languages; they can acc ...
- vue,一路走来(17)--vue使用scss,并且全局引入公共scss样式
最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件. import './asset ...
- 在vue-cli中安装scss,且可以全局引入scss的步骤
简历魔板__个人简历模板在线生成 在写vue的css样式时,觉得需要css预处理器让自己的css更加简洁.适应性更强.可读性更佳,更易于代码的维护,于是在vue-cli脚手架采用scss.写过的人都知 ...
- csharp: Data binding in WPF DataGrid control
<Window x:Class="WpfProjectDemo.MainWindow" xmlns="http://schemas.microsoft.com/wi ...
- VueCli3如何传递scss全局变量
当我们尝试在一个scss文件中定义全局变量然后在.vue文件中使用的时候 哦豁,找不到变量,意料之外 我发现犯了一个错误,没导入,@import 'path/to/file.scss',不过这样的话, ...
- Nuxt.js中scss公用文件(不使用官方插件style-resources)
项目多多少少应该都遇到有公用文件这种情况,比如说偶尔某一天产品来找你,能不能明天把网站的这个颜色给我改下?第二天再来给我换回来? 如果再css2.x时代,不使用css预处理技术,这一改只能“查找替换” ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- d2-admin中那些不错的技巧
d2-admin基于vue-cli3 路由相关 刷新路由,参照官方 组件内的守卫 但是搞不明白为何加了句 render:h => h() { path: 'refresh', name: 'r ...
随机推荐
- 1.24 Python知识进阶 - 类与对象
类 语法格式: class Dog(object): print("the dog is barking ...") Dog为类名,object为要继承的基类,Dog类会从基类ob ...
- 实际感受美丽的Linux(多组视频)
1.Fedora 上使用google earth 2.体验桌面-GNOME 2.2.9 3.体验桌面-KDE4.4 永中Office使用演示(和MS Office 2003很相似哦) 4.在Fedor ...
- 轻松学习Linux之用户账户管理及实例
Linux用户管理基础 (下载清晰视频:http://down.51cto.com/data/158699) 轻松学习Linux之用户账户管理的实例-跨硬盘移动数据 (此处视频不清楚下按下面地址下载清 ...
- [JWT] JWT with HS256
The advantages of JWT over traditional session based validation is: it effectively removing all auth ...
- java list 容器的ConcurrentModificationException
java中的很多容器在遍历的同时进行修改里面的元素都会ConcurrentModificationException,包括多线程情况和单线程的情况.多线程的情况就用说了,单线程出现这个异常一般是遍历( ...
- Android 图片缓存处理
异步下载 / 本地缓存 异步下载 大家都知道,在Android应用中UI线程5秒没响应的话就会抛出无响应异常,对于远程获取大的资源来说,这种异常还是很容易就会抛出来的,那么怎么避免这种问题的产生.在a ...
- Android 通过SOCKET下载文件的方法
本文实例讲述了Android通过SOCKET下载文件的方法.分享给大家供大家参考,具体如下: 服务端代码 import java.io.BufferedInputStream; import java ...
- ASM学习笔记--ASM 4 user guide 第二章要点翻译总结
参考:ASM 4 user guide 第一部分 core API 第二章 类 2.1.1概观 编译后的类包括: l 一个描述部分:包括修饰语(比如public或private).名字.父类.接口 ...
- UVA 294 294 - Divisors (数论)
UVA 294 - Divisors 题目链接 题意:求一个区间内,因子最多的数字. 思路:因为区间保证最多1W个数字,因子能够遍历区间.然后利用事先筛出的素数求出质因子,之后因子个数为全部(质因子的 ...
- 前端开发概述+JS基础细节知识点
一 前端开发概述 html页面:html css javascript 拿到UI设计图纸:切图-->html+css静态布局-->用JS写一写动态效果-->ajax和后台进行交互,把 ...