1 | ////
|
2 | /// @group utils
|
3 | ////
|
4 |
|
5 | /// 自建函数处理除法的差异
|
6 | /// div 方法只有 Dart Sass 有实现,而 Lib Sass 和 Ruby Sass 都没有实现
|
7 | /// 考虑到需要兼容三种编译器的情况,使用 calc 更加稳妥
|
8 | /// calc 在 Dart Sass 和 Ruby Sass 中都表现为除法返回值为数字(50px 或者 0.5 在 sass 中都为数字),在 Lib Sass 中表现为不处理返回原字符串
|
9 | /// 因此可以根据这一特点来判断是否可以使用 calc 来代替除法,并且这种用法官方是认可的。
|
10 | /// 参考:https://sass-lang.com/documentation/breaking-changes/slash-div
|
11 | @function divide($a, $b) {
|
12 | @if type-of(calc(1 / 2)) == 'number' {
|
13 | @return calc($a / $b);
|
14 | } @else {
|
15 | @return $a / $b;
|
16 | }
|
17 | }
|
18 |
|
19 | // 去除数值单位的方法
|
20 | //
|
21 | // @param {String} $value
|
22 | // 带单位的数值
|
23 | //
|
24 | // @example scss - SCSS 用法
|
25 | // $dimension: strip-units(10px);
|
26 | //
|
27 | // @example css - CSS 输出
|
28 | // $dimension: 10;
|
29 | //
|
30 | // @return {Number}
|
31 | @function strip-units($value) {
|
32 | @return ($value / ($value * 0 + 1));
|
33 | }
|
34 |
|
35 | // 检查一个值是否为合法的CSS长度
|
36 | //
|
37 | // @param {String} $value
|
38 | // @return {Number}
|
39 | @function is-length($value) {
|
40 | @return type-of($value) != "null" and (str-slice($value + "", 1, 4) == "calc" // 是calc函数来计算的长度
|
41 | or type-of(index(auto inherit initial 0, $value)) == 'number'
|
42 | or (type-of($value) == "number" and not(unitless($value))));
|
43 | }
|
44 |
|
45 | // 将pixel单位转换为em单位
|
46 | //
|
47 | // @param {Number} $pxval
|
48 | // pixel单位下的数值
|
49 | //
|
50 | // @param {Number} $base
|
51 | // 全局基础pixel单位下的字号
|
52 | //
|
53 | // @example scss - SCSS 用法
|
54 | // .element {
|
55 | // font-size: em(12, 14);
|
56 | // }
|
57 | //
|
58 | // @example css - CSS 输出
|
59 | // .element {
|
60 | // font-size: 0.85714em;
|
61 | // }
|
62 | // @require {function} strip-units
|
63 | // @require {variable} $font-size-body-1
|
64 | //
|
65 | // @return {String}
|
66 |
|
67 | @function em($pxval, $base: $font-size-body-1) {
|
68 | @if not unitless($pxval) {
|
69 | $pxval: strip-units($pxval);
|
70 | }
|
71 | @if not unitless($base) {
|
72 | $base: strip-units($base);
|
73 | }
|
74 | @return ($pxval / $base) * 1em;
|
75 | }
|
76 |
|
77 | // 转化为四值属性的方法,该属性可以有 1 到 4 个值,如:margin, padding, position
|
78 | //
|
79 | // @param {List} $shorthand
|
80 | //
|
81 | // @example scss - SCSS 用法
|
82 | // .element {
|
83 | // margin: unpack(1em 2em);
|
84 | // padding: unpack(1em 2em 2em);
|
85 | // }
|
86 | //
|
87 | // @example css - CSS 输出
|
88 | // .element {
|
89 | // margin: 1em 2em 1em 2em;
|
90 | // padding: 1em 2em 2em 2em;
|
91 | // }
|
92 | //
|
93 | // @return {List}
|
94 | @function unpack($shorthand) {
|
95 | @if length($shorthand) == 1 {
|
96 | @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1);
|
97 | } @else if length($shorthand) == 2 {
|
98 | @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2);
|
99 | } @else if length($shorthand) == 3 {
|
100 | @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2);
|
101 | } @else {
|
102 | @return $shorthand;
|
103 | }
|
104 | }
|
105 |
|
106 | // 圆角生成器
|
107 | //
|
108 | // @access private
|
109 | //
|
110 | // @param {String} $side [$corner-sides-base] - 需要加圆角的面
|
111 | // @param {String} $radius [$corner-radius-base] - 圆角曲率
|
112 | //
|
113 | // @example scss - SCSS 用法
|
114 | // .element {
|
115 | // border-radius: corner-maker();
|
116 | // }
|
117 | //
|
118 | // @example css - CSS 输出
|
119 | // .element {
|
120 | // border-radius: 3px 3px 3px 3px;
|
121 | // }
|
122 | //
|
123 | // @return {List}
|
124 |
|
125 | @function corner-maker($side: $corner-sides-base, $radius: 3px) {
|
126 |
|
127 | $tl: $radius;
|
128 | $tr: $radius;
|
129 | $br: $radius;
|
130 | $bl: $radius;
|
131 |
|
132 | @if ($side == top) {
|
133 | $br: 0;
|
134 | $bl: 0;
|
135 | } @else if ($side == right) {
|
136 | $tl: 0;
|
137 | $bl: 0;
|
138 | } @else if ($side == down) {
|
139 | $tr: 0;
|
140 | $tl: 0;
|
141 | } @else if ($side == left) {
|
142 | $tr: 0;
|
143 | $br: 0;
|
144 | }
|
145 |
|
146 | @return #{$tl} #{$tr} #{$br} #{$bl};
|
147 | }
|
148 |
|
149 | // shadow 生成器
|
150 | //
|
151 | //
|
152 | // @param {String} $direction [$shadow-sides-base] - 阴影方向
|
153 | // @param {String} $blur [$shadow-blur-sd1] - 阴影羽化值
|
154 | // @param {Color} $shadow-color [$shadow-color-opacity-sd1] - 阴影颜色
|
155 | // @param {String} $shadow-x [$shadow-distance-sd1] - 阴影x方向距离
|
156 | // @param {String} $shadow-y [$shadow-distance-sd1y] - 阴影y方向距离
|
157 | // @param {String} $shadow-spread [$shadow-spread-sd1] - 阴影扩散值
|
158 | //
|
159 | // @example scss - SCSS 用法
|
160 | // $shadow-1: shadow-maker();
|
161 | //
|
162 | // @return {List}
|
163 |
|
164 | @function shadow-maker(
|
165 | $direction: $shadow-sides-base,
|
166 | $blur: $shadow-blur-sd1,
|
167 | $shadow-color: $shadow-color-opacity-sd1,
|
168 | $shadow-x: $shadow-distance-sd1,
|
169 | $shadow-y: $shadow-distance-sd1y,
|
170 | $shadow-spread: $shadow-spread-sd1
|
171 |
|
172 | ) {
|
173 |
|
174 | $x: $shadow-x;
|
175 | $y: $shadow-y;
|
176 | $b: $blur;
|
177 | $c: $shadow-color;
|
178 | $s: $shadow-spread;
|
179 |
|
180 | @if ($b == 0) {
|
181 | @return 0 0 0 #FFFFFF;
|
182 | }
|
183 |
|
184 | @if ($direction == $shadow-sides-up) {
|
185 | $x: 0;
|
186 | $y: -$shadow-y;
|
187 | } @else if ($direction == $shadow-sides-right) {
|
188 | $y: 0;
|
189 | } @else if ($direction == $shadow-sides-down) {
|
190 | $x: 0;
|
191 | } @else if ($direction == $shadow-sides-left) {
|
192 | $x: -$shadow-x;
|
193 | $y: 0;
|
194 | }
|
195 |
|
196 | @return #{$x}px #{$y}px #{$b}px #{$s}px $c;
|
197 | }
|