如何使用Sass生成不同间隔和位置的margin和padding

实现方案:

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 函数取值。

结语:

以上是我在借鉴其他大牛的文档以及官方的文档总结出来,如果涉及或是侵犯到了您的利益,还请联系我,谢谢。

另:如果有描述不到位的地方还请看官们指正,感谢。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值