【高端】几个关于SCSS中for循环的高级玩法
简单版
@for $i from 1 through 6 {&:nth-of-type(#{$i}) img {transition-delay: calc(0.1 *#{$i}s);//逐次延时效果}
}进阶版
@for $i from 1 through length($数组) {$color: nth($数组, $i);&:nth-of-type(#{$i}) {color: $color;//通常用于序列颜色显示效果&:hover {color: white;}}
}混合版
$bg-color: "blue", "lightBlue", "green", "orange", "yellow", "purple", "pink", "red", "lightRed";
$bgColors: $blue, $lightBlue, $green, $orange, $yellow, $purple, $pink, $red, $lightRed;
@for $i from 1 through length($bg-color) {
//通过颜色属性定位不同节点，制定进行颜色样式设置&[bg-color="#{nth($bg-color, $i)}"] {color: white;background-color: nth($bgColors, $i);background-image: url("static/img/v-html/bg/#{nth($bg-color, $i)}.jpg");}
}复杂序列逐帧动画
编译后的CSS代码如图
……
更多相关：
-
题目：栈的压入、弹出序列 输入两个整数序列，第一个序列表示栈的压入顺序，请判断第二个序列是否为该栈的弹出顺序。假设压入栈的所有数字均不相等。例如，序列 {1,2,3,4,5} 是某栈的压栈序列，序列 {4,5,3,2,1} 是该压栈序列对应的一个弹出序列，但 {4,3,5,1,2} 就不可能是该压栈序列的弹出序列。 示例 1：...
-
Gold Code Gold Code是以Robert Gold的名字命名的。它是一组特殊的二进制随机(伪随机)序列，其中成员序列之间的相关性很小。由于这种特性(较小的相关性)，它被广泛地用作各种无线通信系统的扰码。 我们可以非常简单地利用 m序列 来生成Gold Code: 选择两个m序列，且这两个序列的移位寄存器的数量相同，然...
-
翻译自：sharetechnote: LFSR LFSR Linear Feedback Shift Register - 线性反馈移位寄存器 LFSR 是一种移位寄存器电路，其中两个或多个中间步骤的输出线性组合并反馈到输入值，这就是为什么它被称为线性反馈移位寄存器的原因。 该电路具有以下特点: 如果初始状态相同，则最终会得到...
-
如果连续数字之间的差严格地在正数和负数之间交替，则数字序列称为摆动序列。第一个差（如果存在的话）可能是正数或负数。少于两个元素的序列也是摆动序列。 例如， [1,7,4,9,2,5] 是一个摆动序列，因为差值 (6,-3,5,-7,3) 是正负交替出现的。相反, [1,4,7,2,5] 和 [1,7,4,5,5] 不是摆动序列，第一...
-
什么是Vuex？只需三分钟！只需创建一个vuex.js文件，让你马上学会使用Vuex，尽管Vuex是个鸡肋！(扔掉store文件夹和里面的index、getters、actions、mutations等js文件吧！)_你挚爱的强哥❤给你发来1条消息❤-CSDN博客https://s-z-q.blog.csdn.net/article/...
-
app.component.html
内容
app.component.ts color='red'; app.component.scss [color='red']{color: red; } 实际效果 ... -
grid: {show: false,left: '0px',top: '50px',right: '1px',bottom: '0px',containLabel: true,backgroundColor: 'white',//show: true的时候才显示borderColor: '#ccc',borderWidth: 1,/...
-
/*横纵分割线颜色透明度*/ xAxis: {axisLabel: {textStyle: {color: "#2484db"}},axisLine: {lineStyle: {color: 'rgba(0,2,85,1)',width: 2,}},splitLine: {show: true,lineStyle: {colo...
-