scss @for 循环

最新推荐文章于 2024-09-22 21:48:02 发布
最新推荐文章于 2024-09-22 21:48:02 发布
阅读量3.3k 收藏 1
点赞数 1
分类专栏： 代码问题 文章标签： scss
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxj7607/article/details/99857287
版权

在实现样式过程中碰到了一个隔一定时间右滑出来的效果，一开始一个个写，感觉太麻烦了，搜了一下scss有个@for方法，效果很强大

 

使用scss @for循环

 

注意一下在选择器调用循环项 $i 和样式里调用是有区别的，选择器里是用插值 #{} ，可以网上找点资料细看一下，然后看网上说还有 from 1 to 16 是不包含结束值16的循环， from 1 through 16包含结束值16

编译结果如下

和想要的结果一样

鲤鱼和龙虾
关注
专栏目录
SCSS常用样式，好看的样式
10-27
9. **控制指令**：如`@if`、`@for`、`@each`和`@while`，提供了条件语句和循环，增强样式表的逻辑性。 10. **部分（Partials）**：以`_`开头的文件是部分文件，通常用于存储可重用的样式代码，不直接编译成CSS，...
在 Sass 中使用 @for 循环
weixin_47178106的博客
07-20 589
for 以两种方式使用：“开始 through 结束” 或 “开始 to 结束”。主要区别在于“开始 to 结束”不包括结束数字，而“开始 through 结束”包括结束数字。#{$i} 部分是将变量（i）与文本组合成字符串的语法。可以在 Sass 中使用 @for 循环添加样式，它的用法和 JavaScript 中的 for 循环类似。这是创建网格布局的有效方法。现在，有了 12 个可用作 CSS class 的列宽选项。
scss-@for 指令
banchousuo6747的博客
10-29 450
　　此指令用于循环输出，具有两种循环方式，下面分别做一下介绍。 　　（1）.@for $var from <start> through <end>: 　　此种方式的遍历索引区间是[start,end]，scss代码实例如下: @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } ...
SCSS 循环
最新发布
疯狂假前端的博客
09-22 260
循环在 SCSS 中非常有用，可以有效地减少重复代码，提高样式的可维护性。通过使用@for和@each，你可以生成复杂的样式结构，并根据条件动态调整样式。
scss语法，使用for循环批量设置class类
qq_17335549的博客
03-08 2651
scss语法，使用for循环批量设置class类
【高端】几个关于SCSS中for循环的高级玩法
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
08-06 8132
编译后的CSS代码如图。
scss的高级用法——循环
xinTianou123的博客
11-18 2515
周末愉快呀！一起来学一点简单但非常有用的css小知识。 最近在一个项目中看到以下css class写法。
scss for循环,$变量，全局样式
ndkfa的博客
03-06 719
这是一个变量，包含了一系列字体加粗的值。它包括数字（100 到 900）、关键字（bold 和 bolder），这些值用于控制文本的粗细。$fonWeight: 这段代码是一个 SCSS（Sassy CSS）代码片段，用于生成一系列字体加粗的类。生成一系列类，类名包含了字体加粗的值。通过这些类，可以轻松地在 HTML 元素中设置不同粗细的字体。：这是一个 SCSS 循环，会迭代。
scss基本使用及操作函数
热门推荐
浩星
12-07 1万+
操作函数 1、for循环 @for … from … through @for $var from <start> through <end> // 范围包括<start>和<end>的值 1 @for … from … to @for $var from <start> to <end> // 范围包括<start>,不包括<end>的值 1 获取数组中第i项的值nth($arr, $i) 获.
library-demo-scss
03-27
6. **控制指令（Control Directives）**：类似于编程语言，SCSS支持条件语句（如`@if`、`@else if`、`@else`）、循环（`@for`、`@each`）以及`@extend`（用于继承和扩展样式）。 在"library-demo-scss-main"这个...
核心scss
02-25
SCSS提供了类似于编程语言的条件语句（如`@if`, `@else`）和循环（如`@for`, `@each`），使得编写复杂的样式变得简单： ```scss $breakpoint: 600px; @media (max-width: $breakpoint) { @for $i from 1 through ...
sass-scss
02-14
8. **控制指令（Control Directives）**：如`@for`、`@each`和`@if`等，使开发者可以编写条件语句和循环，增强CSS的逻辑性。 **三、Sass/SCSS的编译与工作流程** Sass文件并不直接被浏览器解析，而是需要通过...
css-scss
02-10
SCSS支持类似编程语言的控制指令，如`@for`、`@each`和`@if`，使我们能进行条件判断和循环操作，进一步增强样式表的动态性。 7. **注释（Comments）** SCSS支持单行和多行注释，方便开发者添加代码说明。 通过...
scss中使用 for 循环
weixin_42909758的博客
05-10 2235
@for $i from 1 through 30 { .color#{$i} { color:#fff!important; background: rgba(random(255), random(255), random(255), 0.8) !important; } }
scss使用for循环遍历，动态赋值类名并配置不同颜色
weixin_42674490的博客
01-03 1348
需求：后端要传入不同的等级，前端通过等级展示不同的字体颜色，通过scss遍历更有利于动态修改颜色或者增删等级
scss的常用技巧、循环、判断等
weixin_45932463的博客
03-27 1843
使用scss加强对样式的维护
scss循环的用法
weixin_39845185的博客
04-10 3953
今天刚解锁的，scss循环用法： 使用：<div class="margin-left-10">123</div> 直接赋值给class就可以了。margin-left-10：就代表：margin-left:10px;
scss循环生成样式
qq_43585229的博客
09-23 2469
其实循环生成css都是定义一个数组，然后遍历生成，主要在于各个语言的调用方式不一样. 这里使用的rem作为基准单位，也可以用px或者其他 _variable.scss文件 // 文件名以下划线开头表示被引用文件，引用时不用加下划线和后缀名 //定义颜色 $colors:(primary: #db9e3f, info: #4b67af, danger: #791a16, blue-1: #1f3695, 'blue': #4394e4, "white": #fff, //当键名与变量名
vue中， scss怎么能拿到js的变量来循环
05-30
在 Vue 中，可以使用 `:style` 绑定和计算属性来实现在 SCSS 中使用 JS 变量进行循环。 首先，在 JS 中定义需要循环的变量，例如： ```javascript data() { return { colors: ['#f00', '#0f0', '#00f'] } } ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值