// styles/mixins/_position.scss
@use 'sass:list';
@mixin position($position, $box-edge-values) {
position: $position;
$box-edge-values: _unpack-shorthand($box-edge-values);
$offsets: (
top: list.nth($box-edge-values, 1),
right: list.nth($box-edge-values, 2),
bottom: list.nth($box-edge-values, 3),
left: list.nth($box-edge-values, 4),
);
@each $offset, $value in $offsets {
@if _is-length($value) {
#{$offset}: $value;
}
}
}
// styles/mixins/_flexbox.scss
$FLEX_MAP: (
'around': space-around,
'between': space-between,
'center': center,
'end': flex-end,
'start': flex-start,
'stretch': stretch,
);
@function _getFlexValue($key) {
@return map-get($FLEX_MAP, $key);
}
@mixin flexbox($jc: center, $ai: center) {
display: flex;
align-items: _getFlexValue($ai);
justify-content: _getFlexValue($jc);
}
@mixin inlineFlexbox($jc: center, $ai: center) {
display: inline-flex;
align-items: _getFlexValue($ai);
justify-content: _getFlexValue($jc);
}
키워드
선택자나 속성은 일반 변수로는 처리가 불가능하다.
이를 처리하기 위해서 문자보간을 사용하는데, #{}를 사용하면 코드의 어디든지 변수값을 넣을 수 있다.
https://abcdqbbq.tistory.com/82
자주 만드는 ui컴포넌트를 코드의 css꾸러미를 재사용가능하게 패키징
@mixin 이름 () {css코드복붙}
호출할 땐 파일 import하고 코드가 있어야할 위치에 @include 이름()
()안엔 바꾸고 싶은 값
for은 숫자밖에 반복이 안됨 _ 더 범용적
https://gareen.tistory.com/39
사용법
![](https://velog.velcdn.com/images/wkqkel/post/508a953f-71d4-4534-b473-3deed9d8a708/image.png