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的更多相关文章

  1. [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 ...

  2. [SCSS] Write Custom Functions with the SCSS @function Directive

    Writing SCSS @functions is similar to writing functions in other programming languages; they can acc ...

  3. vue,一路走来(17)--vue使用scss,并且全局引入公共scss样式

    最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件. import './asset ...

  4. 在vue-cli中安装scss,且可以全局引入scss的步骤

    简历魔板__个人简历模板在线生成 在写vue的css样式时,觉得需要css预处理器让自己的css更加简洁.适应性更强.可读性更佳,更易于代码的维护,于是在vue-cli脚手架采用scss.写过的人都知 ...

  5. csharp: Data binding in WPF DataGrid control

    <Window x:Class="WpfProjectDemo.MainWindow" xmlns="http://schemas.microsoft.com/wi ...

  6. VueCli3如何传递scss全局变量

    当我们尝试在一个scss文件中定义全局变量然后在.vue文件中使用的时候 哦豁,找不到变量,意料之外 我发现犯了一个错误,没导入,@import 'path/to/file.scss',不过这样的话, ...

  7. Nuxt.js中scss公用文件(不使用官方插件style-resources)

    项目多多少少应该都遇到有公用文件这种情况,比如说偶尔某一天产品来找你,能不能明天把网站的这个颜色给我改下?第二天再来给我换回来? 如果再css2.x时代,不使用css预处理技术,这一改只能“查找替换” ...

  8. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  9. d2-admin中那些不错的技巧

    d2-admin基于vue-cli3 路由相关 刷新路由,参照官方  组件内的守卫 但是搞不明白为何加了句 render:h => h() { path: 'refresh', name: 'r ...

随机推荐

  1. ArcGIS Engine中空间参照(地理坐标)相关方法总结

    转自原文 ArcGIS Engine中空间参照(地理坐标)相关方法总结 1.创建空间参考 /// <summary> /// 根据prj文件创建空间参考 /// </summary& ...

  2. 34.node.js之Url & QueryString模块

    转自:https://i.cnblogs.com/posts?categoryid=1132005&page=6//引用 var url = require("url"); ...

  3. 1.3 Quick Start中 Step 4: Send some messages官网剖析(博主推荐)

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Step 4: Send some messages Step : 发送消息 Kaf ...

  4. javafx spring

    javafx spring http://files.cnblogs.com/files/rojas/airhacks_control.zip

  5. Vue的学习--遇到的一些问题和解决方法

    包括: 1.Missing space before function parentheses 2.如何给.vue文件的页面添加css 3.如何给.vue文件页面里的元素添加监听器 4.如何为每一个页 ...

  6. HDU——T 3579 Hello Kiki

    http://acm.hdu.edu.cn/showproblem.php?pid=3579 Time Limit: 2000/1000 MS (Java/Others)    Memory Limi ...

  7. 使用 Go 语言开发大型 MMORPG 游戏服务器怎么样?(非常稳定、捕获所有异常、非常适合从头开始,但大公司已经有现成的C++框架、所以不会使用)

    使用 Go 语言开发大型 MMORPG 游戏服务器怎么样?和C Socket服务器比起来有什么优劣?可行性怎么样? 从2013年起,经朋友推荐开始用Golang编写游戏登陆服务器, 配合C++做第三方 ...

  8. Xamarin开发手机聊天程序

    使用Xamarin开发手机聊天程序 -- 基础篇(大量图文讲解 step by step,附源码下载)   如果是.NET开发人员,想学习手机应用开发(Android和iOS),Xamarin 无疑是 ...

  9. 7. Spring Boot 启动加载数据 CommandLineRunner

    转自:https://blog.csdn.net/catoop/article/details/50501710

  10. Appium_Python_API

    1) find_element_by_android_uiautomator (‘new UiSelector().text(“XXXX”)’).click 正常匹配2) find_element_b ...