scss @for 循环

最新推荐文章于 2024-09-22 21:48:02 发布
原创 最新推荐文章于 2024-09-22 21:48:02 发布 · 3.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#scss

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

 

使用scss @for循环

 

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

编译结果如下

和想要的结果一样

Scss 基本使用 （ @extend、 @mixin、@import、@if、@for、@while、@each ）
wjianwei666的专栏
05-27 943
如：_colors.scss 和 colors.scss 不能同时存在于同一个目录下，否则带下划线的文件将会被忽略。注意： Scss 的连接符号 - 与下划线符号 _ 是相同的，也就是 @mixin basis-text{ } 与 @mixin basis-text{ } 是一样的混入。从编译出来的 CSS 代码可以看出，通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。如果不希望将一个 Scss 的代码文件编译到一个 CSS 文件，可在文件名的开头添加一个下划线。
scss @for与rgba函数巧妙使用
Smile_ping的博客
11-02 1045
scss @for与rgba函数巧妙使用
scss的高级用法——循环
xinTianou123的博客
11-18 2904
周末愉快呀！一起来学一点简单但非常有用的css小知识。 最近在一个项目中看到以下css class写法。
scss语法，使用for循环批量设置class类
有一棵树的博客
03-08 2901
scss语法，使用for循环批量设置class类
scss中循环的妙用
swallowblank的博客
09-08 6164
文章目录1 @each in 循环2 @for... from... to 循环 1 @each in 循环 使用一个变量： #{$变量名} $colors: ( p1: rgb(255, 113, 61), p2: lightblue, p3: lightseagreen ); @each $key, $color in $colors { &.#{$key} { background-color: $color; } } 2 @for
less和scss循环生成margin和padding
正一品程序员的博客
04-25 596
less和scss循环生成margin和padding。
SCSS 循环
疯狂假前端的博客
09-22 1024
循环在 SCSS 中非常有用，可以有效地减少重复代码，提高样式的可维护性。通过使用@for和@each，你可以生成复杂的样式结构，并根据条件动态调整样式。
【SCSS进阶】1、控制指令（@if、@for、@each、@while）
weixin_52938153的博客
06-08 1860
Sass（Syntactically Awesome Stylesheets）是一种强大的CSS预处理器，它通过引入变量、嵌套、混合（mixins）、继承和函数等高级特性，显著增强了CSS的功能和灵活性。Sass允许你使用更简洁和模块化的语法来编写样式表，从而提高代码的可读性和可维护性。变量使得颜色、字体和其他值可以重复使用，嵌套规则让样式结构更加清晰，混合可以创建可重用的代码块，继承和函数则提供了更高级的样式控制。最终，Sass代码会被编译成标准的CSS，使其兼容所有浏览器。这种预处理器特别适用于大型项目
scss @for 语法错误
最新发布
02-08
### SCSS `@for` 循环的正确语法 在 SCSS 中，`@for` 循环用于重复执行一段样式定义多次。其基本结构如下： ```scss @for $i from <start> through|to <end> { // 样式定义 } ``` 其中 `<start>` 和 `<end>` 是...
【SCSS入门】7、混合宏（Mixins）
weixin_52938153的博客
06-07 1917
Sass（Syntactically Awesome Stylesheets）是一种强大的CSS预处理器，它通过引入变量、嵌套、混合（mixins）、继承和函数等高级特性，显著增强了CSS的功能和灵活性。Sass允许你使用更简洁和模块化的语法来编写样式表，从而提高代码的可读性和可维护性。变量使得颜色、字体和其他值可以重复使用，嵌套规则让样式结构更加清晰，混合可以创建可重用的代码块，继承和函数则提供了更高级的样式控制。最终，Sass代码会被编译成标准的CSS，使其兼容所有浏览器。这种预处理器特别适用于大型项目
scss中使用 for 循环
weixin_42909758的博客
05-10 2336
@for $i from 1 through 30 { .color#{$i} { color:#fff!important; background: rgba(random(255), random(255), random(255), 0.8) !important; } }
scss for循环,$变量，全局样式
ndkfa的博客
03-06 950
这是一个变量，包含了一系列字体加粗的值。它包括数字（100 到 900）、关键字（bold 和 bolder），这些值用于控制文本的粗细。$fonWeight: 这段代码是一个 SCSS（Sassy CSS）代码片段，用于生成一系列字体加粗的类。生成一系列类，类名包含了字体加粗的值。通过这些类，可以轻松地在 HTML 元素中设置不同粗细的字体。：这是一个 SCSS 循环，会迭代。
scss-@for 指令
banchousuo6747的博客
10-29 558
　　此指令用于循环输出，具有两种循环方式，下面分别做一下介绍。 　　（1）.@for $var from <start> through <end>: 　　此种方式的遍历索引区间是[start,end]，scss代码实例如下: @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } ...
scss如何循环创建样式
qq_22481733的博客
08-09 986
代码】scss如何循环创建样式。
【高端】几个关于SCSS中for循环的高级玩法@for $i from 1 through length($keys)
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
08-06 8643
这篇文章展示了SCSS/Sass中的循环编程技巧，主要包括：1. 基础循环实现元素延迟效果；2. 数组遍历实现序列颜色显示；3. 多数组混合应用；4. 复杂序列帧动画实现；5. 对象数组的应用，包括响应式布局适配。这些技巧通过@for循环结合Sass函数，可以高效处理重复样式、动画序列和响应式设计，大大提升CSS开发效率。文章最后还展示了如何将对象数组应用于网页宽度适配方案。
scss使用for循环遍历，动态赋值类名并配置不同颜色
weixin_42674490的博客
01-03 1700
需求：后端要传入不同的等级，前端通过等级展示不同的字体颜色，通过scss遍历更有利于动态修改颜色或者增删等级
Sass使用for循环
知行合一
05-17 5943
Sass使用for循环，遍历样式.item的宽，从1到100百分比
利用scss的for循环设置字体、边距等公共样式
RainHg的博客
07-19 1415
scss设置字体、边距等公共样式
scss的常用技巧、循环、判断等
weixin_45932463的博客
03-27 2557
使用scss加强对样式的维护
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值