SCSS SASS 란 무엇인가?

SASS와 SCSS는 CSS전처리기로 일반적인 CSS를 더욱 간결하고 유지보수하기 쉬운 코드로 변환하는 도구이다.

 

SASS는 "Syntactically Awesome Style Sheets"의 약어이며, SCSS는 "Sassy CSS"의 약어이다. 두 전처리기는 같은 문법을 사용하지만, SCSS는 CSS와 비슷한 구문을 사용하여 작성하고, SASS는 중괄호와 세미콜론을 사용하지 않고 들여쓰기를 통해 구분한다.

 

SCSS, SASS와 일반 CSS의 차이점

1. 변수

SCSS, SASS는 변수를 사용할 수 있다. 이를 통해 자주 사용되는 값을 하나의 변수로 선언하여 재사용성을 높일 수 있다. 일반 CSS도 var() 함수를 사용하여 변수를 정의하고 사용할 수 있지만 이 기능은 CSS3에서 추가되었기 때문에 일부 브라우저에서 지원하지 않을 수 있고 SCSS에 비해 가독성이 떨어질 수 있다. 

 

예시코드

$primary-color: #333333;
$secondary-color: #ffffff;
$highlight-color: #ff0000;

body {
    background-color: $primary-color;
    color: $secondary-color;
}

a {
    color: $highlight-color;
}

 

2. 중첩 규칙(Nested Rules)

SCSS와 SASS는 중첩 규칙을 사용할 수 있다. 이를 통해 하위 요소의 스타일을 간단하게 지정할 수 있다.

 

예시코드

// 일반 CSS
nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav ul li {
    display: inline-block;
}

nav ul li a {
    text-decoration: none;
}

//SCSS
nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
            display: inline-block;

            a {
                text-decoration: none;
            }
        }
    }
}

 

3. Mixin

SCSS와 SASS는 Mixin이라는 기능을 제공한다. Mixin은 재사용 가능한 코드 조각을 만들어서 코드 중복을 줄일 수 있다.

 

예시코드

//CSS
.button-primary {
    background-color: #333333;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
}

.button-secondary {
    background-color: #ffffff;
    color: #333333;
    border: none;
    padding: 10px 20px;
}

//SCSS
@mixin button-style($background-color, $text-color) {
    background-color: $background-color;
    color: $text-color;
    border: none;
    padding: 10px 20px;
}

.button-primary {
    @include button-style(#333333, #ffffff);
}

.button-secondary {
    @include button-style(#ffffff, #333333);
}

 

4. 상속

SCSS와 SASS는 상속을 지원한다. 이를 통해 스타일의 재사용성을 높일 수 있다.

 

예시코드

//CSS
.button {
    border: none;
    padding: 10px 20px;
}

.button-primary {
    background-color: #333333;
    color: #ffffff;
}

.button-secondary {
    background-color: #ffffff;
    color: #333333;
}

//SCSS
.button {
    border: none;
    padding: 10px 20px;
}

.button-primary {
    @extend .button;
    background-color: #333333;
    color: #ffffff;
}

.button-secondary {
    @extend .button;
    background-color: #ffffff;
    color: #333333;
}

---

SCSS와 SASS가 생겨난 배경은 CSS의 한계 때문이다. CSS는 디자인을 하는데 있어 다양한 기능을 제공하지만, 코드의 재사용성이 떨어지고 그에 따라 유지보수도 함께 떨어지는 단점이 있다. 따라서 해당 단점을 보완하고자 생겨나게 된것이다.

 

그러므로 SCSS와 SASS의 장점이라고 하면 변수, 중첩규칙, Mixin, 상속등의 기능을 활용하여 재사용성과 유지보수성, 가독성을 향상시킬 수 있는 것이다.

 

단점은 SCSS와 SASS파일을 CSS파일로 변환하는 과정이 추가되어야 한다는 단점이 있을 수 있다. 하지만 이는 빌드하는 과정에서 변환되는 것이므로 실제 배포된 웹사이트의 성능에 직접적인 영향은 없다.