step 1

scss을 사용할경우 scss 파일을 가져올때 일일이 import 선언하는것을 대체하는 방법

검색어: sass-loader github

참고 url: https://github.com/webpack-contrib/sass-loader

링크 클릭

사용법 확인

webpack.config.js 소스에 코드 추가

마지막에 세미콜론(;) 찍어주는것이 중요

확인을 위해 서버를 재실행: npm run dev

SCSS에서 사용하는 데이터 타입 모음

: number, string, color, boolean, null, list, map, .class

@each 문법을 이용해서 list, map안에 데이터를 꺼내서 사용할 수 있다.

$number: 1;

$string: bold;

$color: red;

$boolean: true;

$null: null;

// 자바스크립트에서 배열과 유사
$list: orange, royalblue, yellow;

// key, value 형태의 자바스크립트에서 객체데이터와 유사(object)
$map: (
    o: orange,
    r: royalblue,
    y: yellow
);

.box {
    whidth: 100px;
    color: red;
    position: relative;
}

// list데이터를 반복적으로 수행
@each $c in $list {
    .box {
        color: $c;
    }
}

// map데이터를 반복적으로 수행
@each $k, $v in $map {
    .box-#{$k}{
        color: $v;
    }
}

확인

SCSS에서 다른 파일의 SCSS파일을 읽어오는 방법

URL을 명시하는 방법

@import url("./sub.scss");

URL을 생략하는 방법

@import "./sub.scss";

확장자를 생략하는 방법

@import "./sub";

두가지 이상을 가져오는 방법

@import "./sub", "./sub2";

mix("첫번째", "두번째"): 첫번째 인자, 두번째 인자값을 섞어서 색상을 표현해주는 함수

background-color: mix(royalblue, red);

lighten("첫번째", "두번째"): 첫번째 인자의 색상을 두번째 인자의 비율만큼 밝게 표현

background-color: lighten(royalblue, 10%);

darken("첫번째", "두번째"): 첫번째 인자의 색상을 두번째 인자의 비율만큼 어둡게 표현

background-color: darken(royalblue, 10%);

버튼을 만들 때 유용하게 사용된다. (마우스를 올리면 색이 진해지도록 설정)

&:hover {
      background-color: darken(royalblue, 10%);
      }

saturate("첫번째 인자", "두번째 인자"): 첫번째 인자의 색상을 두번째 인자의 비율만큼 채도를 올린다.

    background-color: saturate(royalblue, 40%);

desaturate("첫번째 인자", "두번째 인자"): 첫번째 인자의 색상을 두번째 인자의 비율만큼 채도를 낮춘다.

background-color: desaturate(royalblue, 40%);

rgba("첫번째 인자", "두번째 인자"): 투명도 설정을 해줄 수 있다.

background-color: rgba(royalblue, .5);

SCSS 에서 함수기능을 지원한다.

반환된 값을 사용

예시

// 재활용 선언
@mixin center {
    display: flex;
    justify-center: center;
    align-items: center;
}

// 함수 선언
@function ratio($size, $ratio){
    @return $size * $ratio;
}

.box {
    // 변수 선언
    $width: 100px;
    // 변수 사용
    width: $width;
    // 함수 사용
    height: ratio($width, 1/2);
    // 재활용 사용
    @include center;
}

SCSS에서도 반복문을 지원한다.

반복문에 사용되는 변수를 이용 가능하다.

예시

// 1 부터 10 까지 반복
@for $i from 1 through 10 {
    // 번호를 명시하는 방법
    // 보간법 사용
    .box:nth-child(#{$i}) {
        width: 100px * $i;
    }
}