SCSS 간단하게 알아보기

프론트엔드 퍼즐러·2023년 10월 30일

scss 간단히

HTML & CSS 면접질문

목록 보기

4/8

웹 개발을 하다 보면 CSS 코드가 복잡하고 방대해지는 것을 경험하게 됩니다. 이럴 때 SCSS(Sassy CSS)와 같은 CSS 전처리기를 사용하면 스타일시트를 보다 효율적으로 관리할 수 있습니다.

CSS 전처리기와 SCSS란?

CSS 전처리기는 개발자가 쓰기 쉬운 언어로 스타일시트를 작성한 후, 그것을 웹 브라우저가 이해할 수 있는 기본 CSS로 변환하는 도구입니다.

SCSS는 CSS 전처리기 중 하나로, Sass(Syntactically Awesome Style Sheets)의 최신 버전입니다. SCSS는 기본적으로 모든 CSS 문법을 지원하며, 추가적으로 변수, 중첩 규칙, 믹스인 등과 같은 고급 기능도 제공합니다.

SCSS의 주요 기능

변수: 재사용 가능한 값을 저장하는데 사용됩니다.
중첩: 선택자 안에 다른 선택자를 중첩시켜 코드의 가독성을 높이고 반복을 줄입니다.
믹스인: 재사용 가능한 스타일 블록을 정의합니다.
상속: 한 선택자의 모든 스타일을 다른 선택자에게 상속시킵니다.

사용법

중첩과 변수

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

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

.container {
  width: 100%;
  
  .navbar {
    background-color: $primary-color;
    
    .nav-item {
      padding: 10px;
      color: white;

      &:hover {
        background-color: darken($primary-color, 10%);
      }
    }
  }
}

Mix In

JS의 함수처럼 동적으로 스타일링이 가능하게 합니다.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

상속

클래스를 상속하여 공통 스타일링 및 확장이 가능합니다.

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red; 
}

함수

사용자가 정의한 함수를 사용할 수 있습니다. 함수는 복잡한 계산하고 이 값을 재사용 할 수 있습니다.

@function calculate-rem($size) {
  $remSize: $size / 16px;
  @return #{$remSize}rem;
}

.container {
  margin: calculate-rem(32px);
}

⭐ 그러면 함수랑 다른점이 뭔가요?
함수는 특정 값을 계산하거나 변환하여 반환하는데 주로 사용됩니다. 즉, 어떤 입력값을 받아 처리 후 결과값을 반환하는 것이 주요 목적입니다. 반면에 믹스인은 재사용 가능한 스타일 블록을 정의하고 이를 필요한 곳에 적용하는 것이 주된 용도입니다. 믹스인은 CSS 규칙 집합을 생성하며, 일반적으로 값을 반환하지 않습니다.