在nth-child选择器中,你可以使用#{$variable}的插值语法来插入变量的值。例如: scss li:nth-child(#{$item-index}) { background-color: yellow; } 这里,#{$item-index}会被替换为变量$item-index的值(即3),所以选择器实际上是li:nth-child(3)。
在scss中,可以使用nth-child伪类来访问DOM元素的第一个子元素: &:nth-child(1):before{ content:"First Child"; } 案例 div{ &:nth-child(1):before{ content:"First Child"; font-weight: bold; } &:nth-child(2):before{ content:"Second Child"; font-style: italic; } &:nth-child(3):before...
nth-child(n) scss用法nth-child(n)是一个CSS选择器,用于选择父元素的第n个子元素。在SCSS中,它的用法如下: ```scss :nth-child(n) { //你的样式代码 } ``` 请注意,这里的`n`可以是一个具体的数字,也可以是一个表达式。例如: *如果想选择一个父元素下的第2个子元素,可以使用`:nth-child(2)`...
important;font-weight:400;font-size:var(--tab-item-font-size);color:#333333;line-height:var(--tab-comp-height);box-sizing: border-box; &.is-active{font-weight:500;color:#db9130; } &:nth-child(2) {padding-left:0!important; }.tabs-label{width:100%;height:var(--tabs-label-height)...
@for指令可以在限制的范围内重复输出样式,每次按变量的值对输出结果进行变动。 实例1:例如项目中需要设置hwicon类底下第2到8个div子节点需设置样式,如下所示: @for$ifrom 2 through 8 { .com-hwicon { > div:nth-child(#{$i}) { position: relative; ...
&:nth-child(3n + 1) { background-color: #f00; } } 2. 逻辑运算 与(and)和或(or):用于进行逻辑与和逻辑或操作。例如: scss复制代码$has-border: true; $is-active: false; .btn { // 使用逻辑与运算符 @if $has-border and $is-active { ...
@for指令可以在限制的范围内重复输出样式,每次按变量的值对输出结果进行变动。 实例1:例如项目中需要设置hwicon类底下第2到8个div子节点需设置样式,如下所示: @for $i from 2 through 8 {.com-hwicon {> div:nth-child(#{$i}) {position: relative;...
多值变量使用 nth(变量名, 索引值) 索引值起始值为1 --- 类似于css中 nth-child 还不如写多个单值变量 --- 并不是 --- 假设需要设定一组button按钮的样式 // scss $baseColor: red blue; html { background: nth($baseColor, 1); color: nth($baseColor, 2); ...
li:nth-child(#{length($colors)}n + #{$index}) { color: $color; } } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 这样,如果后续有颜色增加,或顺序的调整,我们只需要更新$colors变量的值即可。 @mixin 进一步,我们可以将上面遍历生成nth-child的代码抽取成 mixin,这样可以被其他地方使用。
@for指令可以在限制的范围内重复输出样式,每次按变量的值对输出结果进行变动。 实例1:例如项目中需要设置hwicon类底下第2到8个div子节点需设置样式,如下所示: @for$i from2through8{.com-hwicon{ >div:nth-child(#{$i}) {position: relative;float: right; } } } ...