Sass(SCSS)

Sass(SCSS)

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

CSS Preprocessor란?

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

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

전처리기는 CSS문법과 굉장히 유사하지만 선택자의 중첩이나 조건문, 반복문, 다양한 범위의 연산 등 표준 CSS 보다 휠씬 많은 기능을 제공하기 때문에 보다 편리하게 작성할 수 있습니다.
단, 웹에서는 직접 동작하지 않으므로 이렇게 작성한 전처리기를 웹에서 동작 가능한 CSS로 컴파일 합니다.

데이터의 종류

데이터	설명	예시
Number	숫자	1, 10, 10px, 10em
String	문자	normal, bold, absolute, "image/a.png"
Color	색상	red, blue, orange, #fff00, rgb(0,0,0)
Boolean	논리	true, false
Null	아무것도 없음	null
List	공백이나 , 로 구분된 값의 목록	(apple, orange, banana), apple orange banana
Map	key: value 형태	(apple: red, orange: orange, banana: yellow)

각 데이터 타입에 따라 주의할 사항은 아래와 같습니다.

1. Number은 단위가 있거나 없을 수 있습니다.

2. String은 따옴표가 있거나 없을 수 있습니다.

3. Color는 색상을 나타내는 값을 의미합니다.

4. Null은 속성에 null값을 작성하게 되면 해당 속성은 무시됩니다.

5. List는 공백 또는 ,로 값을 구분한 값의 목록입니다. ( )를 사용하거나 사용하지 않을 수 있습니다. 마치 배열과 유사합니다.

6. Map은 key: value 형태이며 ( )를 꼭 작성해주어야 합니다. 마치 객체와 유사합니다.

중첩

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;
}

위 예제는 변수 w와 h를 사용하기 위해 @at-root 키워드를 사용하였습니다. 변수는 자신이 정의된 위치에 의해 유효범위가 결정이 됩니다.

이때 .item 클래스 선택자는 @at-root 키워드를 통해 중첩으로 해석되지 않고, 바깥에서 사용된 것처럼 컴파일됩니다.

중첩된 속성

단축 속성 이름 다음 - 뒤에 개별 속성으로 사용되는 개별 속성들을 아래 처럼 작성할 수 있습니다.
// SCSS

.box {
	font: {  // font라는 단축 속성의 개별 속성을 이처럼 작성 가능
    	sytle: normal;
        weigth: 600;
        size: 16px;
        family: sans-serif;
    };
    
    margin: {  // margin이라는 단축 속성의 개별 속성을 이처럼 작성 가능
    	top: 10px;
        left: 20px;
    };
}

// Compiled to
.box {
	font-style: normal;
    font-weigth: 600;
    font-size: 16px;
    font-family: sans-serif;
    margin-top: 10px;
    margin-left: 20px;
}