实现方案:
1、for循环
// 编译前
@for $i from 1 through 3 {
.m-#{$i * 5} { margin: ($i * 5) + px; }
.m-t-#{$i * 5} { margin-top: ($i * 5) + px; }
.m-b-#{$i * 5} { margin-bottom: ($i * 5) + px; }
.m-l-#{$i * 5} { margin-left: ($i * 5) + px; }
.m-r-#{$i * 5} { margin-right: ($i * 5) + px; }
.p-#{$i * 5} { padding: ($i * 5) + px; }
.p-t-#{$i * 5} { padding-top: ($i * 5) + px; }
.p-b-#{$i * 5} { padding-bottom: ($i * 5) + px; }
.p-l-#{$i * 5} { padding-left: ($i * 5) + px; }
.p-r-#{$i * 5} { padding-right: ($i * 5) + px; }
}
// 编译后
.m-5 {
margin: 5px;
}
.m-t-5 {
margin-top: 5px;
}
.m-b-5 {
margin-bottom: 5px;
}
.m-l-5 {
margin-left: 5px;
}
.m-r-5 {
margin-right: 5px;
}
.p-5 {
padding: 5px;
}
.p-t-5 {
padding-top: 5px;
}
.p-b-5 {
padding-bottom: 5px;
}
.p-l-5 {
padding-left: 5px;
}
.p-r-5 {
padding-right: 5px;
}
.m-10 {
margin: 10px;
}
.m-t-10 {
margin-top: 10px;
}
.m-b-10 {
margin-bottom: 10px;
}
.m-l-10 {
margin-left: 10px;
}
.m-r-10 {
margin-right: 10px;
}
.p-10 {
padding: 10px;
}
.p-t-10 {
padding-top: 10px;
}
.p-b-10 {
padding-bottom: 10px;
}
.p-l-10 {
padding-left: 10px;
}
.p-r-10 {
padding-right: 10px;
}
.m-15 {
margin: 15px;
}
.m-t-15 {
margin-top: 15px;
}
.m-b-15 {
margin-bottom: 15px;
}
.m-l-15 {
margin-left: 15px;
}
.m-r-15 {
margin-right: 15px;
}
.p-15 {
padding: 15px;
}
.p-t-15 {
padding-top: 15px;
}
.p-b-15 {
padding-bottom: 15px;
}
.p-l-15 {
padding-left: 15px;
}
.p-r-15 {
padding-right: 15px;
}
2、 each遍历配合for循环
// 编译前
$directions: ('t': 'top', 'b': 'bottom', 'l': 'left', 'r': 'right');
$dimensions: ('p': 'padding', 'm': 'margin');
@each $dim in $dimensions {
@each $dir in $directions {
@for $i from 1 through 3 {
$size: $i * 5;
.#{nth($dim, 1)}-#{nth($dir, 1)}-#{$size} {
#{nth($dim, 2)}-#{nth($dir, 2)}: #{$size}px;
}
}
}
}
// 编译后
.p-t-5 {
padding-top: 5px;
}
.p-b-5 {
padding-bottom: 5px;
}
.p-l-5 {
padding-left: 5px;
}
.p-r-5 {
padding-right: 5px;
}
.m-t-5 {
margin-top: 5px;
}
.m-b-5 {
margin-bottom: 5px;
}
.m-l-5 {
margin-left: 5px;
}
.m-r-5 {
margin-right: 5px;
}
.p-t-10 {
padding-top: 10px;
}
.p-b-10 {
padding-bottom: 10px;
}
.p-l-10 {
padding-left: 10px;
}
.p-r-10 {
padding-right: 10px;
}
.m-t-10 {
margin-top: 10px;
}
.m-b-10 {
margin-bottom: 10px;
}
.m-l-10 {
margin-left: 10px;
}
.m-r-10 {
margin-right: 10px;
}
.p-t-15 {
padding-top: 15px;
}
.p-b-15 {
padding-bottom: 15px;
}
.p-l-15 {
padding-left: 15px;
}
.p-r-15 {
padding-right: 15px;
}
.m-t-15 {
margin-top: 15px;
}
.m-b-15 {
margin-bottom: 15px;
}
.m-l-15 {
margin-left: 15px;
}
.m-r-15 {
margin-right: 15px;
}
解析:
针对以上的语法,引用 Sass官方文档 进行解析描述,以更方便的理解语句
1、数据类型 (Data Types)
SassScript 支持 6 种主要的数据类型:
- 数字,
1, 2, 13, 10px
- 字符串,有引号字符串与无引号字符串,
"foo", 'bar', baz
- 颜色,
blue, #04a3f9, rgba(255,0,0,0.5)
- 布尔型,
true, false
- 空值,
null
- 数组 (list),用空格或逗号作分隔符,
1.5em 1em 0 2em, Helvetica, Arial, sans-serif
- maps, 相当于 JavaScript 的 object,
(key1: value1, key2: value2)
2、变量 $
SassScript 最普遍的用法就是变量,变量以美元符号开头,赋值方法与 CSS 属性的写法一样。
以上不管是 each 遍历还是 for 循环,均包含了 Sass 变量的定义以及使用,变量的数据类型如上。
3、插值语句 #{}
通过 #{}
插值语句可以在选择器或属性名中使用变量 。
类似于 Es6 中的 `${}` 语法,括号里面的可以是已经定义好的 Sass 变量。
4、列表函数nth
nth 函数被提及到是在 Sass 文档6.3.2 数组(Lists)中,定义是:nth 函数可以直接访问数组中的某一项。
在上面书写的 Sass 语句中,其中就包含了 nth 函数的用法:
nth($list, $index) ,其中 $list 可以是指 list 类型或者 maps 类型,$index 则是指的 $list 中元素的下标,注意:$index 必须是大于 0 的整数。
例如:nth((10px, 20px, 30px), 2) 对应的就是数组 (10px, 20px, 30px) 中的第2项,也就是20px
注意:nth(('p': 'padding'), 1) 中 $list 是个maps 对象,这种情况下拿到的值就是 ('p' 'padding'),可以在定义一个变量作为过渡,利用 nth 函数取值使用,当然也可以使用 maps 中的 map-get($maps, key) 函数,具体可以查看 Sass 文档 6.3.3,也可以使用 @each 函数。
5、 @for
@for
指令可以在限制的范围内重复输出格式,每次按要求(变量的值)对输出结果做出变动。这个指令包含两种格式:@for $var from <start> through <end>
,或者@for $var from <start> to <end>
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
编译为
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }
@for $i from 1 to 3 {
.item-#{$i} { width: 2em * $i; }
}
编译为
.item-1 { width: 2em; }
.item-2 { width: 4em; }
以上代码,可以看出 through
与 to
含义的区别在于:当使用 through
时,条件范围包含 <start>
与 <end>
的值,而使用 to
时条件范围只包含 <start>
的值不包含 <end>
的值。
注意:<start>
和 <end>
必须是整数值。
6、@each
@each
指令的格式是$var in <list>
,$var
可以是任何变量名,比如$length
或者$name
,而<list>
是一连串的值,也就是值列表。
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
编译为
.puma-icon { background-image: url('/images/puma.png'); }
.sea-slug-icon { background-image: url('/images/sea-slug.png'); }
.egret-icon { background-image: url('/images/egret.png'); }
.salamander-icon { background-image: url('/images/salamander.png'); }
以上例子中,<list> 变量是 (puma, sea-slug, egret, salamander), 有的同学可能会有疑问了(没错,就是我),没有括号也算是 <list> 变量么?我只能说,在
SassScript 中,甚至可以用空格代替逗号作为 <list> 变量的间隔符。
接最上面例子中的代码,我用 @each 遍历了一个对象,而我直接用 nth 函数取了每个 item 的值,并且是可行的。通过 @each 方法,将每个 maps 转换成了 <list> ,从而直接利用 nth 函数取值。
结语:
以上是我在借鉴其他大牛的文档以及官方的文档总结出来,如果涉及或是侵犯到了您的利益,还请联系我,谢谢。
另:如果有描述不到位的地方还请看官们指正,感谢。