SCSS란 무엇인가여

오늘은 제가 프로젝트를 진행하면서 주로 사용하는 html 스타일링 도구! SCSS에 대해서 알아 가보도록 하겠습니다.

 

 

먼저 SCSS란 

SCSS는 Sassy Css의 약자로, css의 확장 문법입니다. Sass(Syntactically Awesome Stylesheets)의 최신 문법 중 하나로, css의 단순한 문법을 확장하여 기존에 css보다 효율적인 스타일링 도구를 제공합니다. scss는 기존 css와 100% 호환이 되므로 그대로 사용 가능합니다.

 

다음 SCSS의 주요 특징에 대해서 알아보도록 하겠습니다.

1. 변수 

- $를 통해 변수를 정의하여 사용할 수 있습니다.

$primary: #ffffff;

body {
  color: $primary;
}

 

2. 중첩

- html 구조를 반영하여 스타일을 중첩 형태로 작성할 수 있습니다.

section {
  nav {
    margin: 0;
    padding: 0;
    li {
      list-style: dot;
    }
  }
}

 

3. 믹스인

- 재사용 가능한 스타일을 블록을 정의하고 호출할 수 있습니다. 

@mixin button-style($color) {
  background-color: $color;
  color: white;
}

.btn-primary {
  @include button-style(#000000);
}

 

4. 상속

- 기존 스타일을 다른 셀렉터에 상속받아 사용할 수 있습니다.

.main-font {
  font-family: 그대들의 원하는 폰트;
  color: #000000;
}

.header {
  @extend .main-font;
  font-size: 5em;
}

 

 

5. 연산

- 수학 연산 사용이 가능합니다.

.font{
	font-size : 1em * 10
}

 

6. 함수

-scss는 내장 함수를 제공하며, 사용자가 커스텀 함수를 정의할 수 있습니다.

$color: #000000;

.lighten-bg {
  background-color: lighten($color, 20%);
}

 

css에서는 지원하지 않거나 지원을 해도 제한적인 것들이 많습니다.

변수	:root와 var()로 사용 가능	$를 사용하여 변수 선언 가능
중첩(Nesting)	-	셀렉터 중첩을 지원
믹스인(Mixins)	-	@mixin과 @include로 재사용 가능
상속(Inheritance)	-	@extend를 사용하여 상속 가능
연산(Operations)	제한적 (calc() 함수만 가능)	수학 연산(+, -, *, /) 및 논리 연산 지원
조건문/반복문	-	@if, @for, @each, @while 지원
함수 정의	-	@function으로 사용자 정의 함수 가능

- 은 지원하지 않음을 말합니다.

 

다음은 css와 scss의 차이점에 대해서 알아보겠습니다.

	CSS	SCSS
코드 재사용성	모든 스타일을 평면적으로 작성해야 하므로, 복잡한 구조에서는 관리가 어렵습니다. 중복 코드가 많이 발생할 수 있습니다.	중첩, 믹스인, 상속 등을 통해 코드 재사용과 유지보수가 쉽습니다. 스타일의 모듈화가 가능
컴파일 여부	작성한 그대로 브라우저 사용가능	브라우저가 이해하지 못해 css로 컴파일 해 야함
유연성 확장성	표준화된 기능만 제공해 제한적	동적 스타일을 작성 가능하고 대규모 프로젝트에서 효유ㅜㄹ적으로 사용하기 위한 기능 제공
브라우저 지원	모든 브라우저 지원	scss 브라우저 직접 지원하지 않으므로 반드시 css로 변환된 결과물을 사용해야 함

 

 

그렇다면 SCSS의 장점은 어떤 점이 있을까?

유지보수 : 코드 중복을 줄이고 구조화된 스타일을 작성할 수 있어 관리에 효율적

확장성 : 믹스, 함수, 변수 등을 통해 더 동적이고 재사용 가능한 스타일링 가능

2가지를 가장 큰 장점이라고 생각이 듭니다.