SCSS, CSS 차이, 장단점(비교 코드)

SCSS(또는 Sassy CSS)와 CSS는 웹 개발에서 스타일을 정의하고 관리하는 데 사용되는 두 가지 다른 언어입니다. SCSS는 CSS의 확장으로, CSS를 더 효율적으로 작성하고 관리하기 위해 개발된 언어입니다.

 

SCSS 장단점

• 장점: 스타일 시트를 더 가독성 있고 유지 보수하기 쉽게 만들 수 있습니다.
• 단점: 전처리기를 위한 도구 필요, 컴파일 시간 소요

 

SCSS, CSS 차이점

문법 차이

• CSS는 중괄호({})와 세미콜론(;)을 사용하여 스타일을 정의하고 구분합니다.
• SCSS는 중괄호와 세미콜론을 사용하는 CSS와 유사한 문법을 가지고 있지만, 중첩된 규칙 및 변수, 함수, 믹스인(Mixin)과 같은 고급 기능을 제공합니다.

컴파일러 필요성

• CSS 파일은 별도의 컴파일 과정 없이 웹 브라우저에서 직접 사용됩니다.
• SCSS 파일은 웹 브라우저에서 직접 사용할 수 없으며, SCSS 파일을 CSS로 컴파일하는 과정이 필요합니다. 이를 위해 Sass나 Less와 같은 전처리기를 사용하거나, 웹 개발 도구를 통해 자동 컴파일할 수 있습니다.

 

SCSS 주요 기능

주요 기능인 변수 할당, 중첩 구문, 모듈화, 믹스인, 확장 및 상속, 그리고 연산자에 대한 예제 코드입니다.

1. 변수 할당 (Variable Assignment)

- SCSS

$primary-color: #007bff;

.button {
  background-color: $primary-color;
  color: white;
}

 

- CSS (변수를 사용하지 않은 경우)

.button {
  background-color: #007bff;
  color: white;
}

 

2. 중첩 (Nesting) 구문

- SCSS

.navbar {
  background-color: #333;

  ul {
    list-style: none;
    padding: 0;

    li {
      display: inline-block;
      margin-right: 10px;
    }
  }
}

 

- CSS (중첩 구문을 사용하지 않은 경우):

.navbar {
  background-color: #333;
}

.navbar ul {
  list-style: none;
  padding: 0;
}

.navbar ul li {
  display: inline-block;
  margin-right: 10px;
}

 

3. 모듈화 (Modularity)

파일 분리를 통한 모듈화 예제는 SCSS 파일을 여러 개로 나누고 @import로 가져올 수 있습니다. 예를 들어, "variables.scss" 파일에 변수를 정의하고, "styles.scss" 파일에서 이 변수를 사용할 수 있습니다.

 

 

4. 믹스인 (Mixins)

믹스인은 일련의 CSS 규칙을 정의하고 나중에 여러 규칙에서 불러와서 사용할 수 있게 해줍니다.

 @mixin 키워드를 사용하여 정의하며, @include 키워드를 사용하여 호출합니다.

 

- SCSS

@mixin button-styles {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
}

@mixin mixin-name($parameter1: default-value, $parameter2: default-value, ...) {
  // Arguments(Defult Value: 생략 가능)도 받을 수 있습니다.
}

@mixin button-style2($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.button {
  @include button-styles;
}

.alert-button {
  @include button-style(#dc3545, red);
  background-color: #dc3545;
}

 

- CSS (믹스인을 사용하지 않은 경우):

.button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
}

.alert-button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  background-color: #dc3545;
}

 

5. 확장 & 상속 (Extend/Inheritance)

확장은 % 기호로 시작하는 "placeholder" 선택자를 사용하여 정의됩니다. 이 선택자는 직접 요소에 적용되지 않으며, 다른 선택자에서 확장할 때만 사용됩니다.

@extend를 사용하여 이 스타일을 확장하고, 추가적인 스타일을 정의할 수 있습니다.

 

- SCSS

%button-styles {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
}

.button {
  @extend %button-styles;
}

.alert-button {
  @extend %button-styles;
  background-color: #dc3545;
}

 

- CSS (확장과 상속을 사용하지 않은 경우):

.button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
}

.alert-button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
}

.button, .alert-button {
  background-color: #dc3545;
}

 

6. 연산자 (Operators)

- SCSS

$base-font-size: 16px;
$line-height: 1.5;

body {
  font-size: $base-font-size;
  line-height: $line-height;
}

h1 {
  font-size: $base-font-size * 2; // 연산자(*)를 사용한 크기 조절
}

 

- CSS (연산자를 사용하지 않은 경우):

body {
  font-size: 16px;
  line-height: 1.5;
}

h1 {
  font-size: 32px; /* 연산자(*)를 사용한 크기 조절 결과 */
}