poptong
83b162d2bd
Some checks failed
🚀 Deploy - Demo / deployment (push) Has been cancelled
- 웹훅 URL을 https://admin.youtooplay.com/webhook로 변경 - Nginx 리버스 프록시 설정 파일 추가 - 배포 가이드 업데이트
44 lines
964 B
SCSS
44 lines
964 B
SCSS
@use "sass:string";
|
||
|
||
/*
|
||
ℹ️ This function is helpful when we have multi dimensional value
|
||
|
||
Assume we have padding variable `$nav-padding-horizontal: 10px;`
|
||
With above variable let's say we use it in some style:
|
||
```scss
|
||
.selector {
|
||
margin-left: $nav-padding-horizontal;
|
||
}
|
||
```
|
||
|
||
Now, problem is we can also have value as `$nav-padding-horizontal: 10px 15px;`
|
||
In this case above style will be invalid.
|
||
|
||
This function will extract the left most value from the variable value.
|
||
|
||
$nav-padding-horizontal: 10px; => 10px;
|
||
$nav-padding-horizontal: 10px 15px; => 10px;
|
||
|
||
This is safe:
|
||
```scss
|
||
.selector {
|
||
margin-left: get-first-value($nav-padding-horizontal);
|
||
}
|
||
```
|
||
*/
|
||
@function get-first-value($var) {
|
||
$start-at: string.index(#{$var}, " ");
|
||
|
||
@if $start-at {
|
||
@return string.slice(
|
||
#{$var},
|
||
0,
|
||
$start-at
|
||
);
|
||
}
|
||
/* stylelint-disable-next-line @stylistic/indentation */
|
||
@else {
|
||
@return $var;
|
||
}
|
||
}
|