SCSS vs CSS 차이점 총정리: 왜 이제는 무조건 SCSS인가?

CSS 지옥에서 탈출하고 싶은 당신에게

혹시 프로젝트 규모가 커질수록 끝도 없이 길어지는 CSS 파일 때문에 머리가 아프신 적 있으신가요? 클래스 이름을 찾느라 스크롤을 위아래로 쉴 새 없이 움직이다 보면, "이걸 좀 더 똑똑하게 관리할 수는 없을까?" 하는 생각이 들기 마련입니다.

걱정하지 마세요. 바로 그 고민을 해결해 줄 강력한 도구, SCSS가 있으니까요. SCSS는 단순한 스타일링 도구를 넘어, 여러분의 코드를 논리적이고 아름답게 구조화해 줄 파트너입니다. 오늘 이 글을 통해 여러분의 코딩 인생이 어떻게 더 효율적으로 변할 수 있는지, 그 희망찬 변화를 분석적으로 보여드릴게요.

---

SCSS란 무엇인가? (개념과 필요성)

SCSS는 'Sassy CSS'의 약자로, 기존 CSS 문법의 모든 기능을 지원하면서 추가적인 기능을 제공하는 CSS 전처리기(Preprocessor)입니다. 쉽게 말해, CSS가 '타자기'라면 SCSS는 매크로 기능이 탑재된 최신 '워드 프로세서'라고 비유할 수 있습니다.

우리가 작성한 SCSS 파일은 브라우저가 바로 읽을 수 없습니다. 그래서 컴파일(Compile)이라는 과정을 통해 표준 CSS 파일로 변환해줘야 하죠. "번거롭게 왜 변환까지 해?"라고 생각할 수 있지만, 그 과정에서 얻는 이득은 엄청납니다.

• 변수 사용: 자주 쓰는 색상, 폰트 크기를 변수에 저장해 재사용할 수 있습니다.
• 중첩 구조: HTML 구조처럼 스타일을 중첩해서 작성해 가독성을 높입니다.
• 모듈화: 파일을 여러 개로 쪼개서 관리할 수 있어 유지보수가 쉽습니다.

반응형

 

개발 환경 세팅하기 (VS Code로 1분 컷)

"설치가 복잡하지 않을까?"라는 걱정은 접어두셔도 됩니다. 가장 대중적인 에디터인 VS Code를 사용한다면 단 1분 만에 환경을 구축할 수 있거든요.

1. VS Code 좌측 메뉴의 Extensions(확장) 아이콘을 클릭합니다.
2. 검색창에 'Live Sass Compiler'를 검색하고 설치(Install)합니다.
3. 하단 상태 표시줄에 'Watch Sass'라는 버튼이 생겼는지 확인합니다.

이제 .scss 확장자로 파일을 만들고 코드를 작성한 뒤, 'Watch Sass' 버튼만 누르면 자동으로 .css 파일이 생성됩니다. 정말 간단하죠? 이 작은 세팅 하나가 여러분의 퇴근 시간을 앞당겨 줄 겁니다.

"Watch Sass" 클릭을 통한 활성화

활성화 상태: "Watching..."

활성화된 상태에서 저장 시 자동으로 .css 파일 생성(성공 시 Success 메시지 출력)

구문 오류 시 Error 메시지 출력

참고로  'Live Sass Compiler'의 설정 변경을 통해 .css 및 .min.css 파일까지 바로 변환된 파일 생성이 가능합니다. 

설정 파일의 옵션 중 "liveSassCompile.setting.formats:" 부분에 확장형과 압축형에 대한 정의 및 저장 위치, 확장자 정보를 기입하여 .scss 파일 수정 후 저장 시 자동으로 해당 파일을 컴파일하여 생성 및 저장이 됩니다. 

728x90

 

이것만 알면 끝! SCSS 핵심 문법 3대장

SCSS의 기능은 방대하지만, 신입 개발자가 당장 실무에서 써먹을 수 있는 핵심 기능은 딱 3가지입니다. 이 세 가지만 익혀도 코드가 확연히 깔끔해집니다.

1. 변수 (Variables)

브랜드 컬러나 자주 쓰는 폰트 크기를 변수($)로 저장하세요. 디자인이 바뀌었을 때 변수 값 하나만 바꾸면 전체 사이트가 수정되는 마법을 볼 수 있습니다.

$primary-color: #3bbfce;
$margin: 16px;

.content {
  border-color: $primary-color;
  color: $primary-color;
  padding: $margin;
}

 

2. 중첩 (Nesting)

HTML 구조를 그대로 따라가며 스타일을 작성할 수 있습니다. 부모 선택자를 계속 반복해서 쓸 필요가 없어집니다.

nav {
  ul {
    margin: 0;
    padding: 0;
  }
  li { 
    display: inline-block; 
  }
  a {
    text-decoration: none;
    &:hover { color: red; } // &는 부모 선택자를 의미
  }
}

 

3. 믹스인 (Mixins)

자주 사용하는 스타일 그룹(예: 버튼 스타일, 중앙 정렬, CSS Prefix)을 미리 정의(@mixin)하고 필요할 때 불러와서(@include) 사용합니다. 인수(arguments)를 전달하여 스타일을 유연하게 재사용할 수 있다는 것이 핵심입니다.

SCSS 코드 (믹스인 정의 및 사용):

// 1. 믹스인 정의: 'borderRadius'라는 믹스인에 $radius라는 인수를 받도록 설정
@mixin border-radius($radius) {
  -webkit-border-radius: $radius; // 웹킷 브라우저용 접두사
  -moz-border-radius: $radius;    // 모질라 브라우저용 접두사
  border-radius: $radius;          // 표준 CSS
}

// 2. 믹스인 사용: 원하는 선택자 내에서 @include로 믹스인을 호출하고 값 전달
.button {
  background-color: blue;
  @include border-radius(5px); // 둥근 모서리 5px 적용
}

.card {
  box-shadow: 2px 2px 5px #ccc;
  @include border-radius(10px); // 둥근 모서리 10px 적용
}

컴파일된 CSS 결과:

.button {
  background-color: blue;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.card {
  box-shadow: 2px 2px 5px #ccc;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

보시다시피, 단 두 줄의 @mixin 정의로 복잡하고 반복되는 CSS 접두사(Prefix) 작업을 여러 곳에서 깔끔하게 재사용할 수 있게 됩니다. 이는 코드의 양을 획기적으로 줄이고 유지보수를 편리하게 만들어 줍니다.

---

CSS vs SCSS 한눈에 비교하기

비교 항목	일반 CSS	SCSS (Sass)
코드 재사용	불가능 (매번 값 입력)	변수, 믹스인으로 무한 재사용
가독성	선택자 중복으로 코드가 길어짐	중첩 구조로 직관적이고 짧음
유지보수	전체 파일 찾아다니며 수정	변수 값 수정만으로 일괄 변경
기능	단순 스타일 정의	연산, 함수, 조건문 등 프로그래밍 가능

표를 보니 차이가 명확하죠? SCSS는 단순히 편한 것을 넘어, 유지보수가 가능한 '시스템'을 만드는 도구입니다.

 

더 멋진 구조를 설계하는 개발자로 성장하기

지금까지 SCSS의 기본 개념과 핵심 사용법을 알아보았습니다. 처음에는 익숙한 CSS를 두고 새로운 문법을 배우는 게 부담스러울 수도 있습니다. 하지만 SCSS를 도입하는 순간, 여러분은 단순한 '코더'가 아니라 효율적인 구조를 설계하는 '개발자'로 한 단계 성장하게 될 것입니다.

오늘 소개한 변수와 중첩부터 하나씩 프로젝트에 적용해 보세요. 엉켜있던 실타래가 풀리듯 코드가 정리되는 쾌감을 느끼실 수 있을 겁니다. 여러분의 성장을 응원합니다!

오늘 포스팅이 SCSS 입문에 도움이 되셨나요? 처음엔 낯설어도 딱 3일만 써보시면 다시는 일반 CSS로 돌아가고 싶지 않으실 거예요. 혹시 설치 과정에서 막히거나 궁금한 점이 있다면 언제든 댓글로 남겨주세요!