[SCSS] 기본 문법(2)

SCSS 정리 참고자료

• 패스트캠퍼스 SCSS 강의
• https://sass-lang.com/guide

📗 SCSS

✏️ @for (반복문)

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

scss에서도 javascript와 유사한 형태의 for 반복문을 사용할 수 있다.
단, 순서는 0이 아닌 1부터 시작하며, 선택자 영역 또는 문자열에서는 변수를 사용할 때는 #{$변수명}의 형식으로 작성한다. (프로퍼티의 값으로 변수만 작성하는 경우에는 ${변수명} 형식)

✏️ @function (함수)

@function ratio($size, $ratio) {
    @return $size * $ratio
}

.box { 
    $width: 160px;
    width: $width;
    height: ratio($width, 9/16);
}

@function, @return 키워드를 활용하여 함수를 작성한다. (함수 호출시 매개변수의 값으로 변수를 사용할 수 있음)

✏️ 색상 함수

.box { // 두가지 색상 섞기
    background-color: mix(royalblue, red);
}
.box { // 10% 밝게
    background-color: lighten(royalblue, 10%);
}
.box { // 10% 어둡게 
    background-color: darken(royalblue, 10%);
}
.box { //50% 채도를 올림
    background-color: saturate(royalblue, 50%);
}
.box { //50% 채도를 낮춤
    background-color: desaturate(royalblue, 50%);
}
.box { //흑백 버전
    background-color: grayscale(royalblue);
}
.box { //색상반전
    background-color: invert(royalblue);
}
.box { //50% 불투명하게
    background-color: rgba(royalblue, 0.5);
}

✏️ $list

$list: red, green, blue;

javascript의 배열과 유사한 형태로 $list 데이터 타입을 사용할 수 있다.

// scss
@each $color in $list { // @each 배열의 아이템 in 배열
    .box {
        color: $color;
    }
}

//compiled css
.box { color: red; }
.box { color: green; }
.box { color: blue; }

✏️ $map

$map: (
    r: red,
    g: green,
    b: blue
);

객체 데이터와 유사한 형태로 key, value 값을 지정할 수 있다.

// scss
@each $key, $value in $map {
    .box-#{$key} {
        color: $value;
    }
}

// compiled css
.box-r { color: red; }
.box-g { color: green; }
.box-b { color: blue; }

✏️ @mixin ~ @content

scss에선 @mixin 키워드를 통해 코드의 모음을 작성하여 사용할 수 있으며,
@mixin 코드 내부에 @content 키워드를 작성한 경우 사용자가 @mixin 호출 후 프로퍼티를 추가할 수 있다.

@mixin basic {
    font-size: 12px;
    color: #333;
    @content;
}
.box {
    @include basic {
        background-color: #eee;
        color: red; // ---> 색상은 red로 출력
    }
}

(이미 지정된 속성을 값을 변경하여 새로 작성한 경우, 새로운 속성이 우선적용됨)