Javascript SCSS: @mixin, @include, 모듈(@import, @use), 내장 모듈

📌 @mixin / @include

1) @mixin 키워드를 통해 재활용할 수 있는 속성을 정의하고, 사용할 때는 @include를 통해 정의되어 있는 속성을 재활용할 수 있다.

@mixin large-text {
    font-size: 30px;
    font-weight: bold;
}
.box {
    @include large-text;
}
// .box { font-size: 30px; font-weight: bold; }

2) @mixin 키워드는 함수처럼 사용할 수 있다. @mixin으로 속성을 선언할 때 매개변수를 입력해주고, 해당 값을 @include로 실행할 때 전달해줘서 값을 사용할 수 있다.

3) @mixin을 선언할 때 매개변수의 초기값을 지정할 수 있고, 조건문도 사용할 수 있다.

@mixin large-text($size: 30px) {
    @if ($size < 30px) {
        font-size: 30px;
    } @else {
        font-size: $size;
    }
    font-weight: bold;
}

.box {
    @include large-text(20px);
}
// .box { font-size: 30px; font-weight: bold; }

4) @mixin에서의 3항 연산자 사용

• javascript에서의 사용: condition ? true : false
• Sass/SCSS에서의 사용: if(condition, true, false)

5) @mixin에서 전개 연산자의 사용
- 매개 변수에 리스트 데이터를 입력할 경우 전개 연산자를 통해 값을 입력할 수 있다.

@mixin spread($t, $r, $b, $l) {
    margin: {
        top: $t;
        right: $r;
        bottom: $b;
        left: $l;
    };
}

.box {
    $m: 10px 20px 30px 40px; // SCSS에서는 해당 값이 list 데이터이다.
    @include spread($m); // error 발생, 여기서는 $m이 list 데이터 이므로 spread의 $t에 $m 값이 들어간다.
    @include spread($m...); // 정상 동작.
    @include spread(10px 20px 30px 40px); // error 발생
    @include spread(10px 20px 30px 40px...); // 정상 동작
}

6) @mixin 키워드 인수
- 매개변수를 지정할 때 초기 값을 입력해주고, @include로 사용할 때 필요한 매개변수만 변수명과 함께 입력하여 사용하면 순서에 상관없이 사용할 수 있다. 사용하지 않는 값을 null로 두면 원하는 값만 사용할 수 있다.

@mixin pos($p, $t: null, $b: null, $l: null, $r: null) {
    position: $p;
    top: $t;
    bottom: $b;
    left: $l;
    right: $r;
}
.absolute {
    @include pos(absolute, $t: 100px, $l: 50px);
}

// .absolute { position: absolute; top: 100px; left: 50px; }

7) @content 규칙
- @mixin에 @content 규칙을 작성한 후 @include할 때 중괄호로 스타일 블록을 추가하면 @content 부분에 추가적으로 스타일이 적용된다.

@mixin icon($url) {
    &::after {
        content: url($url);
        @content;
    }
}
.box {
    @include icon("/images/icon.png") {
        position: absolute;
        top: 0;
        left: 50px;
    };
}
/*
.box::after {
  content: url("/images/icon.png");
  position: absolute;
  top: 0;
  left: 50px;
}
*/

8) Sass와 SCSS에서의 @mixin / @include 차이

• SCSS: @mixin // @include
• Sass: = // +

---

📌 반복

1) @each(for of 문과 유사하다.)

@use "sass:list";
$sizes: 20px 40px 80px;

// list 반복
@each $size in $sizes { // for (const $size of $sizes) { }와 동일하다.
    $index: list.index($sizes, $size);
    .icon-#{$index} {
        width: $size;
        height: $size;
    }
}

/*
.icon-1 {
  width: 20px;
  height: 20px;
}
.icon-2 {
  width: 40px;
  height: 40px;
}
.icon-3 {
  width: 80px;
  height: 80px;
}
*/

2) @for (for문과 유사하다.)

.list {
    @for $i from 1 through 3 {
        .item:nth-chile(#{$i}) {
            width: 100px * $i;
        }
    }
}

/*
.list .item:nth-chile(1) {
  width: 100px;
}
.list .item:nth-chile(2) {
  width: 200px;
}
.list .item:nth-chile(3) {
  width: 300px;
}
*/

여기서 @for ... through / @for ... to 의 차이는 숫자를 포함하냐 안하냐에 있다.
- @for $i from 1 through 3 === for (let i = 1; i <= 3; i++ )
- @for $i from 1 to 3 === for (let i = 1; i < 3; i++)

3) @while (while 문과 유사하다.)

.list {
    .item {
        $i: 1;
        $n: 2;
        @while $n > 0 {
            &:nth-child(#{$i}) {
                width: 100px * $n;
                height: 100px * $i;
            }
            $i: $i + 1;
            $n: $n - 1;
        }
    }
}

/*
.list .item:nth-child(1) {
  width: 200px;
  height: 100px;
}
.list .item:nth-child(2) {
  width: 100px;
  height: 200px;
}
*/

while문과 마찬가지로 조건에 따라 무한루프에 빠질 수 있다는 점을 유의해야 한다.

---

📌 모듈(@import / @use)

1) @import(가져오기)
- 두 개 이상의 .scss 파일에서 변수($variables)나 스타일 적용등을 @import를 통해 가져올 수 있고 @import 방법은 해당하는 파일의 정보를 통으로 가져와서 통합해서 쓰겠다는 의미이다.

- 사용할 때는 $variables를 그대로 사용할 수 있다.

2) @use
- @import 형식으로 가져오면 변수를 그대로 사용할 수 있고, @use 형식으로 가져오면 namespace를 이용하여 사용해야 한다.
- 파일명.변수 형태로 사용해야 한다.
- @use "./variables" as newName; 형태로 as를 사용하여 모듈의 namespace를 바꿀 수 있다.
- @use로 모듈화하여 사용하고 있는 모듈은 선언된 범위 안에서만 사용할 수 있다. 이를 외부에서 사용하려면 @forward 키워드를 통해 사용이 가능하게 만들 수 있다.

3) @forward
- @forward를 통해서 외부에서 사용하게 되면 namespace 기본값은 main이다.
- main.변수명 형태로 사용하고, @forward에 as 키워드를 통해서 중복되는 변수명이 사용되는 문제점을 해결할 수 있는데 이 때는 이름 뒤에 애스터리스크(*)를 붙여줘야 한다.

- @forward "./variables" as var-*; 라고 선언했으면 사용할 때 사용한 변수 명 앞에 var-를 붙여주면 된다. 이때, ‘$변수’ 형태로 작성했으면 '$var-' 형태로 안쪽에 작성한다.

---

📌 내장모듈

- @use 키워드를 통해서 모듈화한 Sass/SCSS 파일을 불러와 사용할 수 있는데, 내장 모듈을 가져와서 사용할 수도 있다. 이 때는 @use 키워드를 사용한 후 내장모듈임을 나타내는 sass: 를 붙여줘서 사용하면 된다.

자주 사용되는 내장모듈

1) sass:color

• color.adjust($color, $red: null, $green: null, $blue: null, $hue: null, $saturation: null, $lightness: null, $whiteness: null, $blackness: null, $alpha: null);

• darken($color, $amount): $color를 $amount 크기만큼 어둡게 한다. // :hover 효과와 자주 쓰인다.

• lighten($color, $amount): $color를 $amount 크기만큼 밝게 한다. // :hover 효과와 자주 쓰인다.

• saturate($color, $amount): $color를 $amount 크기만큼 채도를 높인다.

• desaturate($color, $amount): $color를 $amount 크기만큼 채도를 떨어뜨린다.

• grayscale($color): $color를 회색처리 한다.

• invert($color): $color의 색상을 반전한다.

2) sass:list

• list.append($list, $val, $separator: auto)

• append($list, $val, $separator: auto):
  매개변수로 받은 $list 리스트에 $val 밸류를 마지막에 추가한다. $separator 부분에는 comma, space 등을 사용할 수 있다.

• list.index($list, $value)

• index($list, $value): $list 에서 $value가 몇 번째 index인지 반환한다. index는 1부터 시작한다.

• list.join($list1, $list2, $separator: auto, $bracketed: auto)

• join($list1, $list2, $separator: auto, $bracketed: auto): $list1, $list2 두 개의 list 데이터를 매개변수로 받아서 각각의 리스트 데이터를 합친 새로운 리스트 데이터를 반환한다. $list1 데이터가 먼저 들어간다.

• list.length($list)

• length($list): $list의 길이를 반환한다.(Number)

• list.nth($list, $n)

• nth($list, $n): $list의 리스트에서 $n번째 index를 indexing한다.
  Javascript의 list[1]; 에서 1번째 index의 값을 반환하는 것과 같다.
  index는 숫자 1부터 시작한다.

3) sass:map

• map.get(map, $key): $map 데이터에서 $key 값을 가져온다.map에 없는 값을 작성하면 null이 반환된다.

• map.has-key($map, $key): $map 데이터에서 $key가 있는지 없는지 boolean 값으로 반환한다.

• map.keys($map): $map의 key들을 list 형태로 반환한다.

• map.values($map): $map의 value들을 list 형태로 반환한다.

• map.merge($map1, $map2): $map1, $map2를 합친 새로운 map 데이터를 반환한다.
  만약 $map1, $map2에 동일한 $key가 있다면 해당 $key의 value값은 $map2의 것으로 덮어씌워진다.

• map.remove(map, $key): $map의 $key에 해당하는 key 값을 삭제한다.key 값은 쉼표로 구분하여 2개 이상을 작성해서 삭제할 수 있고, 값이 없는경우 아무 일도 일어나지 않는다.
  $map에서의 값을 삭제하는 것이 아니라, $map에서 $key가 없는 새로운 map 데이터를 $map에 덮어씌우는 개념이다.

4) sass:math

• math.ceil($number): $number의 소수점을 올림한다.

• math.floor($number): $number의 소수점을 내림한다.

• math.round($number): $number의 소수점을 반올림한다.

• math.max($number...): $number로 이루어진 리스트 데이터에서 최댓값을 반환한다.

• math.min($number...): $number로 이루어진 리스트 데이터에서 최솟값을 반환한다.

• math.abs($number): $number의 절대값을 반환한다.

• math.is-unitless($number): $number의 단위가 있는지 확인해서 있으면 false, 없으면 true를 반환한다.

• math.compatible($number1, $number2): $number1과 $number2가 연산이 가능한 단위인지 확인하여 boolean 값을 반환한다.

5) sass:meta

• meta.call($function, $args...)

• call($function, $args...): $function인 데이터를 매개 변수를 받아서 콜백 함수처럼 사용할 수 있다.
  sass에서도 meta 내장모듈을 통해 하나의 함수를 데이터처럼 인수로 활용할 수 있다.

• meta.type-of($value)

• type-of($value): $value의 type을 확인하여 반환한다. 반환되는 값은 number, string, color, list, map, calculation, bool, null, function, arglist 중 하나이다.

6) sass:string

• string.quote($string): $string에 따옴표를 추가한다.

• string.unquote($string): $string에 따옴표를 추가한다.

• string.index($string, $substring): $string에서 $substring이 몇 번째에 있는지 index를 반환한다.(1부터 시작)

• string.insert($string, $insert, $index): $string에 $insert문자열을 $string의 $index번째 index에 추가한다.

• string.length($string): $string의 길이.

• string.slice($string, $start-at, $end-at: -1): $string을 $start-at부터 $end-at까지만 남기고 잘라낸다. $end-at을 생략하면 $start-at부터 모든 글자를 남긴다.

• string.to-upper-case($string): $string을 대문자로 바꾼다.

• string.to-lower-case($string): $string을 소문자로 바꾼다.

• string.unique-id(): 유일한 id값을 반환하여 선택자 등으로 활용할 수 있다. // uabtrnzug

---

📌 배운점

오늘 두 번째로 SCSS의 문법을 배웠다. 어제도 충분히 기본적인 내용을 배웠다고 생각했는데, 오늘 배운 것을 되돌아보면 CSS적인 내용뿐만 아니라 Javascript 같은 내용들도 많이 배웠다.

기존에는 중복되는 스타일을 적용하기 위해서 여러번 작성했었는데 SCSS에서의 다양한 문법들을 활용해서 Javascript처럼 반복문, 조건문을 통해 동적으로 작성할 수 있을것 같다.

아직 직접 사용해보진 않았고 배우기만 했는데도 매우 유용할 것 같아 흥미로웠다.

---

📌 앞으로

처음 접했을 땐 별거 없을거라 생각했는데 오늘까지 배운 것을 돌아보면 내용이 꽤 많다고 느꼈다. 물론 오늘까지 배운 것 외에도 더 많은 내용이 있을 것이다.

필수적인 것을 위주로 배웠다고 판단되는데, 직접 사용해보면서 익히고 더 필요한 것이 있을 때마다 sass-lang, sass meister 같은 사이트를 이용해서 배워나가면 좋을 것이라고 생각한다.

기존의 CSS에 비해 얼마나 간단해질 수 있는지, 얼마나 유용하게 동적으로 작성할 수 있는지 기대가 된다.

---

📌 참고한 사이트

• https://sass-lang.com/
• https://www.sassmeister.com/