UNPKG

5.13 kBSCSSView Raw
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}