[SCSS] @import로 파일 불러오기 및 연산자 활용

파일 불러오기

/* style.scss */
import "header";
import "footer";

/* style.css */
header {
    margin: 0;
}

footer {
    margin: 0;
}

SCSS에서 @import는 같은 .scss 파일을 불러오는 역할을 하며, css 파일로 컴파일될 때 @import 자체가 컴파일되는 게 아닌 import된 파일의 스타일 코드가 .css 파일 안으로 들어오게 된다. 예를 들어, style.scss 파일 안에 @import로만 파일을 불러오고 아무 코드도 입력하지 않았다고 할 때, 컴파일된 style.css 파일 안에는 import된 scss 파일의 코드들이 css로 컴파일되어 있게 된다. 따라서, 만약 규모가 큰 프로젝트의 경우 scss를 각 섹션별로 나눠서 코드를 짠 다음 전체 style.scss에서는 @import를 통해 분할된 파일들을 불러오는 게 더 깔끔해보일 수 있다.

 

연산자 사용

$fs: 15px;
$box: 50px;

.box {
    padding: (50px / 10);
    margin: $box / 2;
    h1 {
        font-size: $fs * 3;
    }
    p {
        margin: $box-margin - 10;
    }
}

SCSS는 JS에서처럼 연산자 사용도 가능하다. 기본적인 +, -, *, /, %가 가능하며 관계 연산자와 논리 연산자도 사용이 가능하다. 산술 연산자의 나눗셈의 경우 한 가지 주의할 점이 있는데, 바로 괄호로 묶어줘야 한다는 점이다.

괄호로 묶어주지 않으면 .css로 컴파일될 때 계산된 결과값이 아닌 연산식 그대로 컴파일되는 오류가 발생한다.

또한, 나눠지는 대상값에만 px 단위를 주고 나누는 값에는 px 단위를 주지 않아야 한다. 그렇지 않으면 컴파일된 결과값에 px 단위가 붙지 않게되는 오류가 발생한다. px 단위의 경우 연산자 공통적으로 한 곳에만 붙이면 되기 때문에 그냥 둘 다 줄 필요가 없다고 기억하는 게 편하다. (ex: 10px + 10, 10px * 5, 10px / 2, 10px - 5 등.. 한 곳에만 픽셀 단위를 주면 된다.)

 

1. 파일을 불러올 때는 @import "파일명" (.scss 파일만 가능)
2. SCSS에서 px 수치를 줄 때 연산자 이용 가능