Sass中@each、@for、@if的搭配使用

最新推荐文章于 2024-07-22 09:25:47 发布

天問_

最新推荐文章于 2024-07-22 09:25:47 发布

阅读量503

点赞数 1

分类专栏：大前端文章标签： sass css 前端

本文链接：https://blog.csdn.net/tiven_/article/details/126352869

版权

大前端专栏收录该内容

67 篇文章 4 订阅

订阅专栏

"本文介绍了Sass中的循环遍历工具@each和@for，以及如何结合@if条件判断在CSS中实现逻辑编程。通过示例展示了如何使用@for生成背景图片的循环应用，以及@each遍历数组并根据条件修改样式。强调了在变量与字符串拼接时需使用#{$var}

摘要由CSDN通过智能技术生成

CSS 预处理器赋予了 CSS 逻辑编程的能力，其中 Sass、Less、Stylus 最受欢迎，语法都是大同小异，上手也很快。在项目中使用最多的可能要数 Sass 了，本文就讲讲 Sass 中循环遍历 @each、@for 和 @if 判断的搭配使用。

Sass && 循环遍历

语法示例

@for

@for 语法需要搭配 from 和 through 关键字使用，eg：

@for $index from 1 through 5 {
    .box-bg-#{$index} {
        background: url("../img/bg-#{$name}.png") no-repeat;
        background-size: 100%;
    }
}

编译后生成：

.box-bg-1 {
    background: url("../img/bg-1.png") no-repeat;
    background-size: 100%;
}

.box-bg-2 {
    background: url("../img/bg-2.png") no-repeat;
    background-size: 100%;
}

.box-bg-3 {
    background: url("../img/bg-3.png") no-repeat;
    background-size: 100%;
}

.box-bg-4 {
    background: url("../img/bg-4.png") no-repeat;
    background-size: 100%;
}

.box-bg-5 {
    background: url("../img/bg-5.png") no-repeat;
    background-size: 100%;
}

@each

@each 语法需要 list 类似于 JS 中 Array 数语的结构，可以先声明一个数组 list 变量，eg：

$states: 'before', 'ing', 'after';
@each $name in $states {
    .box .#{$name} {
        @if $name == 'after' {
            $name: 'before'
        }
        background: url("../img/bg-#{$name}.png") no-repeat;
        background-size: 100%;
    }
}

编译后生成：

.box .before {
    background: url("../img/bg-before.png") no-repeat;
    background-size: 100%;
}

.box .ing {
    background: url("../img/bg-ing.png") no-repeat;
    background-size: 100%;
}

.box .after {
    background: url("../img/bg-before.png") no-repeat;
    background-size: 100%;
}