SCSS

SCSS

CSS는 많이 들어봤는데 SCSS는 생소하시죠...? 오늘은 이 생소한 친구에 대해 파헤쳐 볼건데요. 쉽게 생각해서 CSS를 좀더 편하게 쓰기 위한 녀석입니다. 이 언어는 Sass라는 언어와 자주 묶여서 설명이 나오는데요. 이 둘은 문법 생김새는 다르지만 사실 같은 파생언어라고 봐도 무방합니다. 그리고 Sass보다는 SCSS의 활용수, 사용자 수 가 많으므로 여기서는 SCSS를 다룰게요.

---

■ 개념

Sassy CSS란 뜻인데요. 이걸 풀이하자면 문법적으로 멋있는(Sassy) CSS란 뜻이에요.
SCSS란 매우 쉽게 말하자면 CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어에요.
SCSS는 중첩, 변수 선언, 연산자 등 많은 장점이 있습니다. 그중에서도 가장 대표적인 장점으론 셀렉터 중첩기능이 있습니다.

▶셀렉터 중첩 기능 예시

//CSS 작성 nav ul {
     margin: 0;
     padding: 0;
     list-style: none;
}
     nav li {
     display: inline-block;
}
nav a {
     display: block;
     padding: 6px 12px;
     text-decoration: none;
}

//같은 코드를 SCSS로 구현
nav {
    ul {
         margin: 0;
         padding: 0;
         list-style: none;
     }
    li { display: inline-block; }
    a {
        display: block;
         padding: 6px 12px;
        text-decoration: none;
    }
}

■ 장점

- CSS보다 심플한 표기법
- 가독성과 재사용성이 높아 유지보수가 쉽습니다.
- 다른 팀엄과의 작업시 수준차이를 평준화 할 수 있습니다.
- CSS의 태생적 한계를 보완하기 위해 유용한 기능, 도구(변수의 사용, 조건문과 반복문, 임포트...)을 제공한다.
- 선택자의 중첩을 통해 반복되는 부모요소 선택자 사용수를 줄일 수 있습니다.
- 반복문, 조건문 사용으로 동적 CSS
- 상속되는 선택자를 계층적 명시를 통해 불필요한 반복사용을 줄일 수 있습니다.

■ 단점

- 전처리기를 위한 도구가 필요합니다.
- 컴파일 시간이 소요됩니다.

■ 사용법

▶ 변수(Variables)
CSS에서도 변수선언은 가능하지만, SCSS에서는 더 간편하게 선언 및 사용이 가능합니다.

$color: #ed5b46;
$borderRadius: 5px;
div {
     background-color: $color;
     border-radius: $borderRadius;
}

▶ 중첩(Nesting)
셀렉터 중첩이나 속성 중첩 등 상위 요소를 참조하는 것이 가능합니다.

// 일반 CSS 코드
label {
    padding: 3% 0px;
    width: 100%;
    cursor: pointer;
    color: $colorPoint;
}
label:hover {
    color: white;
    background-color: $color8;
}

// SCSS 코드
label {
    padding: 3% 0px;
    width: 100%;
    cursor: pointer;
    color: $colorPoint;
    &:hover {
        color: white;
        background-color: $color;
    }
}

▶ 임포트(Import)
기존 CSS import와 기능이 같습니다. 활용도가 단순하고,확실합니다.

@import "common.scss";

.label {
    height: 100%;
    align-center: 100%; }