SASS SCSS – 변수, 중첩, CodePen 실습

**SASS(Syntactically Awesome Stylesheets)**는 CSS 전처리기로, 유지보수가 쉽고 효율적인 스타일링을 도와주는 도구입니다. 특히 SCSS는 CSS와 거의 동일한 문법을 사용해 접근성이 좋습니다. 이번 포스트에서는 SASS를 활용하는 가장 기초적인 방법을 다루며, 실습 도구로 CodePen을 활용합니다.

왜 CodePen을 사용하는가?

로컬 환경에서 SASS를 사용하려면 SASS 설치 → 컴파일 설정 과정을 거쳐야 합니다. 하지만 CodePen은 웹 기반에서 SASS를 자동으로 컴파일해주기 때문에 학습이나 테스트에 최적입니다. 설정은 다음과 같이 간단합니다:

1. CodePen 접속 후 새 펜(New Pen) 생성
2. Settings > CSS에서 Preprocessor를 SCSS로 설정

SASS 변수의 기초

변수는 자주 사용하는 값을 반복해서 쓰지 않도록 저장하고 재사용하는 기능입니다. $로 시작하며 다음과 같이 정의합니다:

$color-primary: #f9ed69; // 노란색
$color-secondary: #f08a5d; // 오렌지색
$color-tertiary: #b83b5e; // 핑크색

이 변수들은 어디서든 사용할 수 있고, 한 번만 변경하면 전체 스타일에 반영됩니다.

SASS 중첩(Nesting)

SASS의 강력한 기능 중 하나는 선택자의 중첩 작성입니다. CSS에서는 다음과 같이 작성했다면:

.navigation li {
  display: inline-block;
}

SASS에서는 중첩으로 더 깔끔하게 작성할 수 있습니다:

.navigation {
  li {
    display: inline-block;
  }
}

앰퍼샌드(&) 연산자

중첩 안에서 슈도클래스나 복합 선택자를 사용할 땐 & 기호를 사용합니다:

 

.navigation {
  li {
    &:first-child {
      margin-left: 0;
    }
  }
}

SASS로 작성한 스타일 예시

$color-primary: #f9ed69;
$text-dark: #333;

.navigation {
  background-color: $color-primary;
  padding: 30px;
  list-style: none;

  li {
    display: inline-block;
    margin-left: 30px;

    &:first-child {
      margin-left: 0;
    }

    a {
      text-decoration: none;
      text-transform: uppercase;
      color: $text-dark;
    }
  }
}

마무리: 실습 팁

• 실습한 코드를 저장하고 공유하려면 CodePen의 URL을 복사하면 됩니다.
• View Compiled 메뉴를 통해 컴파일된 CSS 코드를 확인할 수 있습니다.
• SCSS 문법은 익숙해질수록 훨씬 더 강력한 구조를 만들 수 있습니다.

---

SASS를 처음 접하셨나요? 위 내용을 한 번 실습해보시고 직접 변수와 중첩의 효율성을 체감해보세요. 다음 시간에는 mixin과 extend 등 더 고급 기능도 소개할 예정입니다.