SASS(SCSS)란 뭘까?

SASS(SCSS) 란?

SASS(SCSS)는 Syntactically Awesome Style Sheets로, CSS를 확장한 언어입니다.

SCSS를 왜 사용할까?

1. 변수의 사용

$primary-color: #3498db;
$secondary-color: #2ecc71;

// 변수 활용
.navbar {
  background-color: $primary-color;
}

.button {
  background-color: $secondary-color;
}

2. 조건문과 반복문

// 반복문을 이용한 그리드 시스템 생성
$total-columns: 12;
$column-width: 60px;

@for $i from 1 through $total-columns {
  .col-#{$i} {
    width: $column-width * $i;
  }
}

3. Import (모듈화)

// 모듈화된 SCSS 파일을 가져오기
@import "variables";
@import "mixins";

// 이후 변수와 믹스인 활용 가능

4. Nesting (선택자 반복 작성 줄여주는 기능)

// Nesting을 이용한 코드 작성
.navbar {
  background-color: $primary-color;
  ul {
    list-style: none;
    li {
      display: inline-block;
      &.active {
        font-weight: bold;
      }
    }
  }
}

5. Mixin (함수 개념)

// 믹스인 선언
@mixin border-radius($radius) {
  border-radius: $radius;
}

// 믹스인 활용
.button {
  @include border-radius(5px);
}

6. Extend/Inheritance (확장/상속)

// Extend를 이용한 상속
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

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

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

SASS와의 차이점은 뭘까?

SASS 와 SCSS 와의 차이점은 대표적으로는 {}, ;이 있겠다.

SCSS는 이렇게 사용하지만,

div {
  font-size: 10rem;
  a{
    color: black;
  }
  li{
    color: white;
  }
}

SASS는 이런 식으로 사용한다.

div 
  font-size: 10rem
  a
    color: black
  li
    color: white

이렇게 두 코드의 차이점은 {}와 ;밖에 존재하지 않지만

나는 개인적으로 조금 더 형식을 갖춘 SCSS가 더 사용하기 편하다고 생각한다.

SCSS 직접 사용해보기

// 변수 선언
$primary-color: #3498db;
$secondary-color: #2ecc71;
$total-columns: 12;
$column-width: 60px;

// 믹스인 선언
@mixin border-radius($radius) {
  border-radius: $radius;
}

// Extend를 이용한 상속
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// 선택자 Nesting 및 조건문, 반복문 활용
.navbar {
  background-color: $primary-color;
  ul {
    list-style: none;
    li {
      display: inline-block;
      &.active {
        font-weight: bold;
      }
    }
  }
}

// 반복문을 이용한 그리드 시스템 생성
@for $i from 1 through $total-columns {
  .col-#{$i} {
    width: $column-width * $i;
  }
}

느낀 점

원래 pure css에서 styled component로 바로 넘어가서 SCSS와 SASS를 모른 채로 시작했지만

알고 보니까 pure css를 사용했을 때 SCSS와 SASS를 사용했더라면 좀 더 편안하게 개발을 할 수 있을 것 같은 생각이 들었다.

재균의 FE일지