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

最新推荐文章于 2022-09-21 19:57:42 发布

让我玩项羽

最新推荐文章于 2022-09-21 19:57:42 发布

阅读量776

点赞数

分类专栏：前端样式库文章标签： sass

本文链接：https://blog.csdn.net/weixin_42136785/article/details/120014549

版权

前端样式库专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现方案：

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
评论
如何使用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
复制链接

扫一扫