SCSS, CSS Preprocessor

SCSS에 대해 설명해주세요

웹에서는 표준 CSS만이 동작할 수 있습니다. Sass는 CSS Preprocessor라는 개념을 통해 작성을 하고 컴파일이라는 과정을 통해 CSS 문법으로 다시 변환됩니다.

CSS Preprocessor란?

CSS를 작성하기 전에 Sass나 Less라는 개념을 통해서 편하고 쉽게 작성을 합니다. 즉, Sass나 Less는 CSS가 작성되지 전 단계에 작성을 합니다. 그렇기 때문이 이것들을 CSS 전에 동작을 한다고 해서 전(예비)처리기라고도 합니다. Sass는 CSS의 확장 기능으로 볼 수 있습니다.

앞에서 설명한 것처럼 웹에서는 CSS만이 동작할 수 있기 때문에 CSS 전처리기를 통한 웹에서의 직접적인 동작은 되지 않습니다 그렇기 때문에 전처리기를 컴파일(분석하여 CSS로 변환하는 작업)이 필요합니다.

중첩

Sass는 중첩기능을 사용하여 상위 선택자의 작성을 피하고 좀 더 편리하게 복잡한 구조를 작성할 수 있다.

// SCSS
.box {
    width: 100px;

    .list {
        padding: 20px;
    }
}

// Compiled to
.box {
	width: 100px;
}

.box .list {  // 후손 선택자로 컴파일
	padding: 20px;
}

상위 선택자 참조 (Ampersand)

중첩 안에서 & 키워드를 사용하면 상위(부모) 선택자를 참초하여 치환한다.

// SCSS
.box {
	width: 100px;

    &:hover {
    	width: 300px;
    }
}

// Compiled to
.box {
	width: 100px;
}

.box:hover {  // &는 상위 성택자인 .box로 치환
	width: 300px;
}

@at-root (중첩 벗어나기)

중첩에서 벗어난 것으로 컴파일하고 싶다면 @at-root 키워드를 사용합니다. 중첩 안에서 생성하되 중첩 밖에서 사용된것으로 컴파일해야 하는 경우에 유용합니다.

// SCSS
.box {
	$w: 100px;
    $h: 200px;

    width: $w;
    heigth: $h;

    @at-root .item {
    	width: $w;
        height: $h;
    }
}

// Compiled to
.box {
	width: 100px;
    height: 200px;
}

.item {  // 후손 선택자로 컴파일되지 않음
	width: 100px;
    heigth: 200px;
}