SCSS

SCSS

SCSS는 CSS를 보다 쉽게 사용하기 위해서 만들어진 기능 입니다. SCSS는 중괄호{}와 세미콜론(;)의 형식으로 작성 됩니다.

---

CSS와 SCSS

CSS와 SCSS의 차이점을 예제를 통해서 알아 봅시다.

CSS

.dog {
    width: 100px;
    height: 100px;
    z-index: 1;
}
.dog:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.03);
    transform: translatey(-30%) scale(1.5);
}

SCSS

//dog
.dog {
    width: $dog-width;
    height: $dog-width;
    z-index: 1;
      
    &:before {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: rgba(black, 0.03);
        transform: translatey(-30%) scale(1.5);
    }
}

.dog:before {
    content: "";
}

.dog {
    &:before {
        content: '';
    }
}

CSS는 가상요소를 줄 때, 밖에서 before를 선언한 후 따로 사용 해야 하지만, SCSS의 경우 요소 안에 &를 사용한 후, 가상요소를 사용할 수 있습니다.

$dog-width: 100px;
$interval: 200ms;
$color-gray: #eaebec;
$easing: ease-in-out;

SCSS의 경우 변수를 간편하게 저장 할 수 있습니다. 재사용 하고 싶은 요소를 변수로 저장 하는데, 이때 SCSS는 앞에 $를 표시 하면 변수를 만듭니다.

SCSS 문법

SCSS의 문법은 변수처럼 사용이 가능합니다.

Numbers	숫자	1, .82, 20px, 2em…
Strings	문자	bold, relative, "/images/a.png", "dotum"
Colors	색상 표현	red, blue, #FFFF00, rgba(255,0,0,.5)
Booleans	논리	true, false
Nulls	아무것도 없음	null
Lists	공백이나 ,로 구분된 값의 목록	(apple, orange, banana), apple orange
Maps	Lists와 유사하나 값이 Key: Value 형태	(apple: a, orange: o, banana: b)