【Sass】常用全局sass高级函数，可使用原子化CSS减轻代码量，方便快速开发

---

前言

提示：这里可以添加本文要记录的大概内容：

针对style的预编译器为scss

转载自git前端知识库
原博主是B站up程序员郑清，可以看他的v3教程巩固一下

---

常用flex和margin-padding

提示：以下是本篇文章正文内容，下面案例可供参考

一、安装

cnpm install sass --save-dev
1

二、样式

custom.scss

代码如下（示例）：

// 图片大小
@each $key, $val in sm 50, base 100, lg 160 {
  // img-base
  .img-#{$key} {
    width: #{$val}px !important;
    height: #{$val}px !important;
    border-radius: $val * 0.1px;
  }
}

// 文字超出？行溢出隐藏...  text-overflow-1
@for $i from 1 through 2 {
  .text-overflow-#{$i} {
    display: -webkit-box; /* 使用旧版WebKit内核布局盒模型 */
    -webkit-line-clamp: #{$i}; /* 限制文本显示的行数为2行 */
    -webkit-box-orient: vertical; /* 设置盒模型布局方向为垂直 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 使用省略号表示被截断的部分 */
    // &:hover {
    //   white-space: normal; /* 显示全部 */
    //   overflow: visible; /* 取消超出隐藏 */
    // }
  }
}

@each $key, $val in ('sm': 12px, 'base': 16px, 'lg': 20px) {
  // font-size-base
  .font-size-#{$key} {
    font-size: $val !important;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

flex.scss

代码如下（示例）：

// flex布局 ********************************************
.flex {
  display: flex;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-wrap {
  display: flex;
  flex-wrap: wrap; // 子元素换行
}
// .flex-1{flex:1}
@for $i from 1 through 6 {
  .flex-#{$i} {
    flex: #{$i};
  }
}
// 设置主轴方向 x y
$direction: (
  // 从左到右（默认值）
  'r': row,
  // 从右到左
  'rr': row-reverse,
  // 从上到下
  'c': column,
  // 从下到上
  'cr': column-reverse
);
// 主轴上子元素排列方式
$justify: (
  // 从头部开始，如果主轴是x轴，则从左到右（默认值）
  'start': flex-start,
  // 在主轴居中对齐(如果主轴是 x 轴则水平居中)
  'center': center,
  // 从尾部开始排列
  'end': flex-end,
  // 先两边贴边，再平分剩余空间☆☆☆
  'between': space-between,
  // 平分剩余空间
  'around': space-around
);
// 侧轴上子元素排列方式
$align: (
  // 从上到下
  'start': flex-start,
  // 挤在一起居中(垂直居中)
  'center': center,
  // 从下到上
  'end': flex-end,
  // 拉伸(默认值)
  'stretch': stretch
);

@each $alignKey, $alignVal in $align {
  @each $justifyKey, $justifyVal in $justify {
    @each $directionKey, $directionVal in $direction {
      // flex-start-center
      .flex-#{$justifyKey}-#{$alignKey} {
        display: flex;
        justify-content: #{$justifyVal};
        align-items: #{$alignVal};
      }
      // flex-r-start-center
      .flex-#{$directionKey}-#{$justifyKey}-#{$alignKey} {
        display: flex;
        flex-direction: #{$directionVal};
        justify-content: #{$justifyVal};
        align-items: #{$alignVal};
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

color.scss

// 循环实现动态样式
// #{xxx}：字符串  $xx：数值
// 颜色 ********************************************
$color-primary: #00aaff;
$colors: (
  'white': #fff,
  'black': #000,
  'primary': #00aaff,
  'success': #4cd964,
  'warning': #f0ad4e,
  'error': #999,
  'disable': #c0c0c0,
  // 辅助灰色，如加载更多的提示信息
  'grey': #999,
  // 浅灰色
  'lightgrey': #f6f6f6,
  'placeholder': #808080,
  'red': #ff0000,
  // 点击状态颜色
  'hover': #f1f1f1,
  // 遮罩颜色
  'mask': rgba(0, 0, 0, 0.4),
);
@each $key, $value in $colors {
  .text-color-#{$key} {
    color: $value;
  }
  .bg-color-#{$key} {
    background-color: $value;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

---

margin-padding.scss

如果是小程序, 把px改为rpx就好了
用法：m-r-10
m-y-0

// 内外边距 ********************************************
// 类型
$spacing-types: (
  m: margin,
  p: padding,
);
// 位置
$spacing-directions: (
  t: top,
  b: bottom,
  l: left,
  r: right,
);
$spacing-base-size: 1px; // 基数
// 循环出 margin 与 padding 的各类值
@each $typeKey, $type in $spacing-types {
  @for $i from 0 through 300 {
    // 如果能够被 2 整除，将应用以下样式
    @if ($i % 2 == 0) {
      // m-10{margin:10px} || p-30{padding:30px}
      .#{$typeKey}-#{$i} {
        #{$type}: $i * $spacing-base-size !important;
      }
      // m-x-10{marfin-left:10px;marfin-right:10px} || p-x-30{padding-left:30px;padding-right:30px;}
      .#{$typeKey}-x-#{$i} {
        #{$type}-left: $i * $spacing-base-size;
        #{$type}-right: $i * $spacing-base-size;
      }
      // m-y-10{marfin-top:10px;marfin-bottom:10px} || p-y-30{padding-top:30px;padding-bottom:30px;}
      .#{$typeKey}-y-#{$i} {
        #{$type}-top: $i * $spacing-base-size;
        #{$type}-bottom: $i * $spacing-base-size;
      }
      // m-t-10{margin-top: 10px} || m-l-10{margin-left:10px} || p-r-10{padding-right:10px} || p-b-10{paddding-bottom:10px}
      @each $directionsKey, $directions in $spacing-directions {
        .#{$typeKey}-#{$directionsKey}-#{$i} {
          #{$type}-#{$directions}: $i * $spacing-base-size !important;
        }
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

orther

// 文字水平对齐方式 ********************************************
@each $var in (left, center, right) {
  .text-#{$var} {
    text-align: $var;
  }
}

// ********************************************
.overflow-x-scroll {
  overflow-x: scroll; // 水平方向超出滚动
}
.overflow-y-scroll {
  overflow-y: scroll; // 垂直方向超出滚动
}
.overflow-y-auto {
  overflow-y: auto; // 垂直方向高度超出后才显示滚动条
}
.overflow-x-hidden {
  overflow-x: hidden;
}

// 字体 ********************************************
.font-bold {
  font-weight: bold;
}

// 边框颜色 ********************************************
// 类名  .border-b
// $orientation: (
//   t: top,
//   b: bottom,
//   l: left,
//   r: right,
// );
// @each $orientationKey, $orientationVal in $orientation {
//   .border-#{$orientationKey} {
//     border-#{$orientationVal}: 1px solid #e4e4ee;
//   }
// }

// *******************************************************
// 外边框圆角
@for $i from 1 through 10 {
  // 如果能够被 2 整除，将应用以下样式
  @if ($i % 2 == 0) {
    // b-rd-6
    .b-rd-#{$i} {
      border-radius: #{$i}px;
    }
  }
}

.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}

// 宽高
@for $i from 0 through 500 {
  @each $key, $val in w width, h height, lh line-height {
    // 如果能够被 10 整除，将应用以下样式
    @if ($i % 10 == 0) {
      // w-20 || lh-100
      .#{$key}-#{$i} {
        #{$val}: 1px * $i;
      }
    }
  }
}

.position-relative {
  position: relative; // 父：相
}
.position-absolute {
  position: absolute; // 子：绝
}

// 元素显示模式 eg: display-inline-block
@each $val in block, inline, inline-block {
  .display-#{$val} {
    display: #{$val};
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。