[CSS] CSS, SCSS 차이

CSS와 SCSS는 스타일시트 언어로, 웹사이트의 디자인을 결정하는데 사용되는 언어입니다. CSS는 Cascading Style Sheets의 약자로, HTML 요소의 스타일을 지정하는데 사용됩니다. 반면 SCSS는 Sassy CSS의 약자로, CSS의 확장판이며 CSS와 완전히 호환됩니다.



SCSS의 장점

- 변수 사용: SCSS는 변수를 사용하여 동일한 값을 여러 군데에서 재사용할 수 있습니다.
- 중첩 규칙: CSS에서는 중첩 규칙을 사용할 수 없지만, SCSS에서는 중첩 규칙을 사용하여 코드를 더 간결하고 읽기 쉽게 만들 수 있습니다.
- 믹스인(Mixin): SCSS에서는 코드를 재사용하기 위해 믹스인을 사용할 수 있습니다.
- 연산: SCSS는 기본적인 연산을 지원합니다.

CSS 예시 :

.header {
  width: 100%;
  background-color: #f5f5f5;
}

.header .logo {
  float: left;
  width: 50px;
  height: 50px;
}

.header .menu {
  float: right;
  margin-top: 15px;
}

 

SCSS 예시 :

$bg-color: #f5f5f5;
$header-height: 50px;

.header {
  width: 100%;
  background-color: $bg-color;

  .logo {
    float: left;
    width: $header-height;
    height: $header-height;
  }

  .menu {
    float: right;
    margin-top: ($header-height / 2) - 5px;
  }
}

위의 예시에서 볼 수 있듯이, SCSS는 변수를 사용하여 동일한 값을 여러 군데에서 재사용하였습니다. 또한 중첩을 사용하여 코드를 더 간결하게 만들었으며, 연산을 사용하여 계산된 값을 사용하였습니다. 이런 기능들은 기본 CSS에서는 사용할 수 없습니다.