SCSS와 SASS: 효율적인 CSS 전처리기 사용법

React

SCSS와 SASS: 효율적인 CSS 전처리기 사용법

startfront 2025. 4. 8. 17:22

CSS전처리기

CSS 전처리기는 CSS 코드를 작성할 때 보다 효과적이고 조직적으로 스타일을 관리하기 위한 스크립팅 언어
이 전처리기는 특별한 문법을 사용하여 작성되며, 웹 사이트를 실행하기 전에 일반 CSS로 컴파일
(vs code extension - compile hero)해서 배포합니다

종류

Sass와 SCSS가 있다.

특징	SCSS	SASS
문법	CSS와 유사한 문법 사용	들여쓰기를 기반으로 한 문법 사용
세미콜론 및 중괄호	;와 {} 사용	세미콜론과 중괄호 없이 들여쓰기로 구분
CSS 호환성	기존 CSS 파일을 SCSS로 변환 가능	CSS와 호환되지 않음, 별도의 문법 사용
간결성	상대적으로 덜 간결하지만 직관적	더 간결하고 읽기 쉬운 문법
문법 예시	scss<br> .btn { color: red; }	sass<br> .btn<br> color: red
파일 확장자	.scss	.sass
주로 사용되는 환경	대부분의 프로젝트에서 사용됨	예전부터 SASS 사용자가 많지만, 현재는 SCSS가 더 일반적

=> SCSS는 기존 CSS 파일을 그대로 사용할 수 있고, SASS는 조금 더 간결하게 작성

SASS 사용의 장점

✔️코드 재사용 : 믹스인, 변수, 함수 등을 사용하여 코드 중복을 줄인다.
✔️유지 및 관리 용의성 : 분할 및 구조화 된 코드로 관리한다.
✔️고급 기능 사용 : 조건문, 반복문, 연산 등

브라우저는 Sass의 문법을 알지 못하기 때문에
Sass(.scss) 파일을 css 파일로 트랜스파일링(컴파일)하여야 한다.

Sass 환경의 설치

 npm install -g sass

=> Sass 컴파일러는 SCSS와 전통적인 Sass 문법 모두를 처리

컴파일

sass <변환할 SCSS 파일명> <변환될 CSS 파일명> [옵션]

예시 1: 기본 변환
sass style.scss style.css
# SCSS 파일을 CSS로 변환

예시 2: 자동 컴파일 (Watch 모드)
sass --watch style.scss style.css
# SCSS 파일을 감시하고, 변경 시 자동으로 CSS로 변환

예시 3: 자동 컴파일 + 소스 맵 제외
sass --watch style.scss style.css --no-source-map
# SCSS 파일을 감시하며 변환하고, 소스 맵 파일은 생성하지 않음 (배포 시 사용)

옵션 설명:
--watch : SCSS 파일을 감시하여 변경 시 자동으로 CSS로 컴파일
--no-source-map : 소스 맵을 생성하지 않음 (배포 시 사용)
--source-map : 기본적으로 소스 맵을 생성 (디버깅 시 유용)

=> 혹은 VS code extension – compile here 사용 우클릭하여 자동 컴파일

SCSS 기본 문법

변 수(Variables)
CSS의 값을 저장하고 재사용하는 방법
주로 중복해서 사용하는 font-family와 베이스 color 들을 변수로 지정한다.

선언 형식] $변수명 : 값;
사용 형식] 속성: $변수명;

$font-stack: Helvetica, sans-serif;
$primary-color: gray;

body {
  font: $font-stack;
  color: $primary-color;
}

중첩(Nesting)

계층적으로 상속되는 CSS를 더욱 계층적으로 보이게 만드는 기능

계층을 선택자로 표시하던 것을 그룹으로 묶을 수 있게 되어 더욱 깔끔하고 가독성 좋은 방식으로 코딩

=> 중첩은 3 depth 이내로 하는것 이 권장된다.

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

  li {
    display: inline;
  }

  a {
    display: block;
    text-decoration: none;
    padding: 6px 12px;
  }
}

파일 분리와 임포트(Partials & Import)

.scss 파일을 여러 파일로 나누고 필요한 곳에서 임포트하는 기능

부분 파일 이름은 _로 시작하고, import 할때는 생략

_(언더스코어)로 시작하는 파일 이름은 독립적이지 않음

: stand alone으로 컴파일 되지 않는 것을 의미. 다른 SCSS 파일에 import되어 사용될 목적으로 만들어진다

_base.scss

$font-stack: Helvetica, sans-serif;
$primary-color: #e2efa8;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

modules.scss

@use "base";

.inverse {
  height: 200px;
  width: 300px;
  background-color: base.$primary-color;
}

Mixins
재사용 가능한 스타일의 그룹을 정의하는 사용

- 형식

// 기본 Mixin 선언
@mixin 이름 { }

// Mixin 사용
@include 이름;

// 인자를 사용하는 Mixin
@mixin 이름($인자) {
  속성: $인자;
}

// 인자 전달
@include 이름(값);

// 여러 인자 전달
@include 이름(값1, 값2);

// 이름 기반으로 인자 전달
@include 이름($인자명: 값);

-예시

// 테마 설정: 배경색, 그림자, 텍스트 색상
@mixin theme($theme: Darkgray) {
  background-color: $theme;
  box-shadow: 5px 5px 1px rgba($theme, 0.25);
  color: white;
}

// 박스 크기 및 여백 설정
@mixin box {
  height: 50px;
  width: 10px;
  margin: 10px auto;
  padding: 5px;
}

// 클래스에 스타일 적용
.info {
  @include theme;  // 기본 테마
  @include box;    // 박스 스타일
}

.alert {
  @include theme(Darkred);  // 다른 테마
  @include box;
}

.success {
  @include theme(green);  // 다른 테마
  @include box;
}

Extend

재사용 가능한 스타일 상속 받은 선택자들이 공유하는 방식

=> 선택자 병합 방식이기 때문에 예기치 못한 사이드 이펙트가 발생할 수 있음

.button-basic {
  padding: 15px;
  font-size: 16px;
  margin: 10px;
  border: none;
  text-align: center;
  cursor: pointer;
  background-color: pink;
  width: 100px;
  height: 30px;
}

.button-report {
  @extend .button-basic;
  background-color: orange;
}

& 연산자 (and)

Nesting 에서 자식이 아닌 부모(self)를 참조하는 역할

.button {
  color: white;
  background: blue;
  font-size: 16px;

  // 1. &를 사용하여 중첩된 선택자가 부모 선택자를 참조
  &:hover {
    background: darkblue;
  }

  // 2. 미디어 쿼리에서 부모 선택자를 유지하여 스타일 적용
  @media (max-width: 600px) {
    & {
      font-size: 14px;
    }
  }
}

// 3. 부모 선택자와 연결된 새로운 클래스명 만들기
.card {
  &-header {
    font-size: 20px;
  }
  &-body {
    font-size: 15px;
  }
}

// 4. 부모 선택자가 포함된 구조 만들기
.icon {
  &.large {
    width: 50px;
    height: 50px;
  }
}

조건문(@if, @else if, @else)

주어진 조건에 따라 다른 스타일을 적용할 때 사용

$theme: light;

.button {
  width: 100px;
  height: 30px;
  text-align: center;
  border-radius: 5px;

  // 테마에 따라 스타일 적용
  @if $theme == light {
    background-color: pink;
    color: black;
    border: 1px solid gray;
  } @else {
    background-color: gray;
    color: white;
    border: 1px solid black;
  }
}

#{변수명} : 변수 값을 클래스명이나 속성 값에 동적으로 적용

반복문을 활용해서 스타일 자동 생성

=> 여러 개의 버튼 스타일 자동 생성!!!!!

// for: 단순 반복
@for $반복변수명 from 시작 through 끝 {
  #{반복변수}
}

// each: 리스트나 맵을 반복
@each $변수명 in list/map {}

- for 예시

// for: 반복문을 사용해 스타일 생성
$button-sizes: 100, 150, 200;

@for $i from 1 through 3 {
  .btn-#{$i} {
    width: nth($button-sizes, $i);
    height: 40px;
    background-color: #4CAF50;
    color: white;
  }
}

-each 예시

// each: 리스트나 맵을 반복하여 스타일 생성
$button-colors: red, blue, green;

@each $color in $button-colors {
  .btn-#{$color} {
    background-color: $color;
    width: 150px;
    height: 40px;
    color: white;
  }
}