Sass(SCSS)

 

1. CSS Preprocessor 가 뭐예요?

 

- 전처리기 3대장으로는 Less, Sass(SCSS), Stylus 가 있음.

- 보통 CSS Preprocessor 라고 부름.

- 사스는 기초 언어에 힘을 주는 css 의 확장임.

- 웹에서는 css 만 동작하기 때문에 전처리기는 직접 동작시킬 수 없음.

- 전처리기는 css 문법과 굉장히 유사하지만 선택자의 중첩이나 조건문, 반복문, 다양한 단위의 연산을 활용할 수 있음.

- 표준 css 보다 훨씬 많은 기능을 사용해서 편리하게 작성이 가능함.

- 단, 웹에서는 직접 동작을 하지 않으니 전처리기를 작성 후, 웹에서 동작 가능한 표준의 css 로 컴파일 해야 함.

- 컴파일 방법은 많음... 주로, node-sass 라는 Node.js 기반 컴파일러인 LibSass 에 바인딩한 라이브러리를 사용하거나

Webpack, Parcel 등등...

 

2. Sass (SCSS) 

 

- 문법은 Sass 가 Stylus 와 비슷하고, SCSS 는 Less 와 비슷함.

- Sass 와 SCSS 는 하나의 컴파일러로 모두 컴파일 가능함.

- 가장 오래된 css의 확장 언어임. (훌륭)

 

> Sass 와 SCSS 의 차이점은?

- Sass 의 3버전에서 등장한 SCSS 는 css 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass 의 모든 기능을 지원하는 css 의 상위 집합임.

- 즉, SCSS 는 css 와 거의 같은 문법으로 Sass 기능을 지원함.

- 둘은 {} 중괄호와 ;세미콜로의 유무 차이가 있음.

 

/* 이건 Sass */
.star
    height: 158px
    color: yellow
    div
        background: #000
            margin-right: -10px

 

- Sass 는 선택자의 유효범위를 '들여쓰기'로 구분함.

- 간결하고 작성하기 편리함, 중괄호나 세미콜론이 없으니 훨씬 깰끔.

 

/* 이건 SCSS */
.star {
    height: 158px;
    div {
        background: #000;
        &:last-child {
            margin-right:-10px;
        }
    }
}

 

- SCSS 는 {} 중괄호로 범위를 구분함.

- 인라인 코드로 한줄 작성이 가능하며,css 와 유사한 문법을 가지기 땜시롱 코드 통합이 쉬움.

 

둘은 개인 취향이기에 회사나 팀에서 사용 시, 상황에 맞게 원하는 방식으로 골라서 사용합시다.

(저는 SCSS가 더 좋네요.)

 

 

3. 중첩 (Nesting)

 

- Sass 는 중첩 기능을 사용할 수 있음.

- 상위 선택자의 반복을 피하고 편리하게 복잡한 구조 작성 가능.

 

.star {
    height:158px;
    .kim {
        padding:20px;
        li {
            display:inline-block;
        }
    }
}


/* 컴파일 후 이렇게 바뀌는 거임 */
.star { height:158px; }
.star .kim { padding:20px; }
.star .kim li { display:inline-block; }

 

4. 상위 선택자 참조 (Ampersand)

 

.star {
    width:158px;
    &.active {
        background-color:#ff0000;
    }
}

.list {
    li {
        &:last-child {
            margin-right:0;
        }
    }
}

/* 컴파일 되면 일케 됨 */
.star { width:158px; }
.star.active { background-color:#ff0000; }
.list li:last-child { margin-right:0; }

 

& 키워드가 참조한 상위 선택자로 치환됨.

 

.star {
	&-sm { font-size:12px; }
    &-md { font-size:14px; }
    &-lg { font-size:16px; }
}

/* 컴파일 되면 이렇게 됨요 */
.star-sm { font-size:12px; }
.star-md { font-size:14px; }
.star-lg { font-size:16px; }

 

5. 중첩 탈출 @at-root 

 

- 중첩에서 탈출하고 싶을 때 사용한다.

- 중첩 안에서 생성하되 중첩 밖에서 사용해야 하는 경우에 유용함.

- 중첩 안에서 있는 특정 변수를 범위 밖에서 사용할 수 없으니까... @at-root  키워드를 사용해야 함.

 

.star {
	$w: 1000px;
    $h: 158px;
    li {
    	width: $w;
        height: $h;
    }
    @at-root .kim {
    	width: $w;
        height: $h;
    }
}

/* 컴파일 하믄 이렇게 돼 */
.star li { width:1000px; height:158px; }
.kim { width:1000px; height:158px; }

 

 

6. 중첩 속성

 

- 동일한 네임 스페이스를 가지는 속성들을 줄여 쓸 수 있다.

 

.star {
    font: {
        weight: 500;
        size: 14px;
    };
    margin: {
        top: 10px;
        right: 10px;
    };
}

/* 컴파일 되믄 일케 됨 */
.star { font-weight:500; font-size:14px; margin-top:10px; margin-right:10px; }

 

7. 변수 (Variables)

 

- 반복적으로 사용되는 값을 변수에 지정하여 사용 가능

- 변수 이름 앞에는 항상 $ 를 붙이셈.

 

$변수이름 : 속성값;

$main-f-c: #ededed;
$main-f-w: 500;
$h : 158px;

.star {
	height: $h;
    color: $main-f-c;
	font-weight: $main-f-w;
}

/* 컴파일 되면 이렇게 됨 */
.star { height:158px; color:#ededed; font-weight:500; }

 

8. 변수 유효 범위 (Variable Scope)

 

- 변수는 사용 가능한 유효범위가 있다.

- 선언된 블록 {} 내부에서만 유효 범위를 가짐.

 

.star {
	$color: #ededed;
    background: $color;
}

/* 변수 $color 는 .star 의 블록 내부에서 설정된 변수라서, 블록 밖의 .kim 내부에서는 사용 불가능 */
.kim {
	color: $color;
}

 

9. 변수 재할당 (Variable Reassignment)

 

- 변수에 변수를 재할당 가능하다.

 

$black : #000000;
$pink : #FF338E;

$main-color: $pink;
$sub-color: $black;

.star {
    color: $main-color;
    background: $sub-color;
}

/* 컴파일 되면 */
.star { color:#000; background:#ff338e; }

 

10. !global (전역 설정)

 

- !global 플래그 사용 시 변수의 유효범위를 전역 글로벌로 빼서 설정 가능함.

 

.star {
    $color: #FF338E !global;
    background: #color;
}

.kim {
    color: $color;
}

/* 컴파일 되면 */
.star { background:#FF338E; }
.kim { background:#FF338E; }

 

11. !default (초기값 설정)

 

- !default 플래그는 할당되지 않은 변수의 초기값을 설정함.

- 할당되어 있는 변수가 있으면 그 변수가 기존 할당값을 사용함.

 

$main-color: #FF338E;

.star {
    $main-color: #ededed !default;
    background: $main-color;
}

/* 컴파일 되면 */
.star { background:#FF338E; }

 

그러니까, 변수와 값을 설정하겠지만, 기존 변수가 있을 경우에는

현재 설정하는 변수의 값은 사용하지 않겠어~ 라는 의미로 사용하면 된다고 한다.

 

디폴트값을 왜 주는 거냐고 생각이 들 텐데, 🧐 풀어서 생각해 보자면 

 

외부 라이브러리를 사용했을 때, 그 라이브러리 내부의 변수들과

내가 작성한 코드의 변수들이 Overwrite 덮어쓰기 되는 문제가 생길 것임. 😡

 

그렇기 때문에 덮어쓰기 되는 상황을 안 만드려면,

!default 플래그를 세우면 됩니다.

 

/* box.scss 페이지라고 가정 */
$pink-500: #FF338E;

/* main.scss 페이지라고 가정 */
@import 'box';

$pink-500: #FF147D !default; /* 난 원래 이 핑크색이었어~ 알아주라~ */

.star {
    background: $pink-500;	/* import 해온 #FF338E가 적용됨. */
}

 

12. #{} (문자 보간)

 

- #{} 를 이용하여 코드의 어디든지 변수 값을 넣을 수 있음

 

⭐️ 보간법이란?

>>> 보간(Interpolation) 은 템플릿 리터럴 문법이고, 중간에 무엇인가를 끼워 넣는다는 의미가 있음.

const name = 'star'
console.log(`Hello ${name}?!`)

라고 표현하는 걸 보간법(補間法) 이라고 함. 😃

 

$family: unquote("Noto+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

/* 컴파일 되면 */
@import url("http://fonts.googleapis.com/css?family=Noto+Sans");

 

Sass 의 내장 함수 unquote() 는 문자에서 따옴표 "" 를 제거해 줍니다.