scss-@for 指令

　　此指令用于循环输出，具有两种循环方式，下面分别做一下介绍。

　　（1）.@for $var from <start> through <end>:

　　此种方式的遍历索引区间是[start,end]，scss代码实例如下:

@for $i from 1 through 3 {.item-#{$i} { width: 2em * $i; }
}

　　编译后的css代码如下:

.item-1 {width: 2em;
}
.item-2 {width: 4em;
}
.item-3 {width: 6em;
}

　　（2）.@for $var from <start> to <end>:

　　此种方式的遍历索引区间是[start,end-1]，scss代码实例如下:

@for $i from 1 to 3 {.item-#{$i} { width: 2em * $i; }
}

　　编译后的css代码实例如下:

.item-1 {width: 2em;
}
.item-2 {width: 4em;
}

更多专业前端知识，请上【猿2048】www.mk2048.com

scss-@for 指令相关推荐

scss怎么引入到html,Sass 导入指令
描述导入指令,导入SASS或SCSS文件. 它直接需要导入文件名. 在SASS中导入的所有文件将在单个CSS文件中组合.当我们使用@import规则时,很少有事情编译到CSS:文件扩展名<.c ...
scss值列表_Sass @each指令用法示例
Sass @each指令包含列表中每个项目的值.它也可用于多个分配以及带有地图的多个分配. 简单的@each指令 @each指令具有多个分配 @each指令具有多个分配和映射在Sass简单的@eac ...
scss中的@each 指令
@each的作用:循环一个list 或者一个map 示例一: 循环一个list: 类名为 icon-20px .icon-22px.icon-24px写他们的字体大小写法就可以如下: $sizes:2 ...
Angular6自定义指令实现多图片上传预览
在做移动端开发多时候经常会遇到用户图片上传的需求,有单图片上传预览的需求,也有多图片上传预览的需求.自己刚遇到这个需求的时候有踩到各种个样到坑.经过多番尝试,下面将本人成功的一个案例分享出来(公司对外 ...
vue-cli 自定义指令directive 添加验证滑块
欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640 ---------------------------------------------------------- ...
基于angular4+ng-bootstrap+bootstrap+scss的后台管理系统界面
描述在angular2刚才发布的不久,很多人不懂得怎么应用,直到现在也很多人不懂怎么用, 于是我在余业时间做了这么一个后台管理系统页面,希望对大家有帮助!! 从我个人的感觉来说,angular2语法 ...
SASS 和 SCSS 的区别
原文 Difference Between SASS and SCSS SASS(Syntactically Awesome Style Sheets)是一种由 Hampton Catlin 设计.C ...
一个SCSS里mixin的使用例子
Mixins are the Sass equivalent of macros in other programming languages. If you've programmed before ...
vue.js 四（指令和自定义指令）
官方的指令说明已经很简单了,这里再写一遍,也是自己加深一下印象 v-text 就是写入单纯的文本,可以忽略这个指令直接双花括号代替 <span v-text="msg"> ...

scss-@for 指令

scss-@for 指令相关推荐

最新文章

热门文章