SCSS variable for loop All In One
2024-10-19 03:26:21
SCSS variable for loop All In One
@each
$r: red;
$g: green;
$b: blue;
$colors: (
1: $r,
2: $g,
3: $b,
);
.container-color {
@each $key, $val in $colors {
&-#{$key} {
color: $val;
}
}
}
.container-color-1 {
color: red;
}
.container-color-2 {
color: green;
}
.container-color-3 {
color: blue;
}
@for
/* warning: this is generally a bad idea */
@for $i from 1 through 3 {
.tooltips-container-#{$i} {
font-size: #{$i}px;
}
}
/* warning: this is generally a bad idea */
.tooltips-container-1 {
font-size: 1px;
}
.tooltips-container-2 {
font-size: 2px;
}
.tooltips-container-3 {
font-size: 3px;
}
demo
@for demo
$min: 1;
$max: 3;
@for $i from $min through $max {
.tooltips-container-#{$i} {
position: relative;
}
}
.tooltips-container-1 {
position: relative;
}
.tooltips-container-2 {
position: relative;
}
.tooltips-container-3 {
position: relative;
}
@each demo
.popover-custom-class {
display: block !important;
$l: left;
$r: right;
$t: top;
$b: bottom;
$positions: $l, $r, $t, $b;
@each $key in $positions {
&[x-placement^=#{$key}] .popper__arrow::after {
border-#{$key}-color: #409eff !important;
}
}
}
.popover-custom-class {
display: block !important;
}
.popover-custom-class[x-placement^=left] .popper__arrow::after {
border-left-color: #409eff !important;
}
.popover-custom-class[x-placement^=right] .popper__arrow::after {
border-right-color: #409eff !important;
}
.popover-custom-class[x-placement^=top] .popper__arrow::after {
border-top-color: #409eff !important;
}
.popover-custom-class[x-placement^=bottom] .popper__arrow::after {
border-bottom-color: #409eff !important;
}
refs
https://sass-lang.com/documentation/at-rules/control/for
https://sass-lang.com/documentation/at-rules/control/each
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
最新文章
- AFNetwork源码解析
- 基于C++／Lua的游戏服务器如何实现?
- Lua Rings库介绍
- C# TextBox中只允许输入数字的方法
- QDomDocument Access violation writing location
- cad实时平移快捷键
- 【锋利的Jquery】读书笔记五
- 搜索suggestion
- Linux shell查询ip归属地
- ZZZPHP1.61 代码审计-从SQL注入到Getshell
- 3.2.3 SpringMVC注解式开发
- 【开发】iOS入门 - Touch事件处理学习笔记
- node基础—模块系统
- Vue 结合 Axios 接口超时统一处理
- 【netcore入门】在Windows IIS上部署.NET Core 2.1项目
- JavaScript笔记 #07# 用js写算法
- 【消息队列】kafka是如何保证消息不被重复消费的
- CasperJS断言
- December 24th 2016 Week 52nd Saturday
- 1095 Cars on Campus