Sass(SCSS)의 장점(특징)

Sass(SCSS)란?!

• Syntactically Awesome Style Sheets 라고 불리는 CSS 전처리기이다.
• 기존의 CSS의 단점(한계)을 보완하기 위한 CSS 확장판이다.
• CSS에 비해, 어떤 장점(특징)을 갖고 있을까?
  Sass: Syntactically Awesome Style Sheets

---

CSS가 갖고 있는 단점

• CSS는 규모가 큰 프로젝트일수록, 코드 중복이 많아지고 복잡해진다.
  • 선택자 생성 시, 부모요소 선택자를 적어야 함.
  • function과 같은 함수가 존재 하지 않아, 수동으로 일일이 변경해야 함.
  • 조건문과 반복문과 같은 문법이 없어, 불편함.
• 이러한 복잡함으로 인해, 유지보수가 어려워진다는 단점이 존재한다.

---

Sass(SCSS)의 장점

• CSS보다 간단한 표기로, CSS를 구조화하여 표현 가능하다.
• 이러한 특징은 가독성과 재사용성을 높여주며, 유지보수가 쉬어진다.
• 이를 위한 다양한 도구와 기능에 대해 알아본다.

---

1. 변수

• $변수명으로 변수를 선언할 수 있다.
• 타입은 숫자,문자열, 색상, boolean, null, lists, maps가 올 수 있다.

$변수명: 속성값; 

---

2. 수학 연산자

• 다른 프로그래밍 언어처럼, 수학 연산자를 사용할 수 있다.
• +, -, /, *, %, ==, != 등…

---

3. Nesting

• 선택자의 반복을 줄여주는 기능이다.
• 중첩해서 선언하는 기능
  CSS와 비교하여 보기

   .box {
      width: 100%;
   }
   .box h1 {
     color: red;
   }
  

   .box {
      width: 100%;
      h1 {
        color: red;
      }
   }
  

• 반복되는 요소를 붙일 때는 & 사용
  CSS와 비교하여 보기

   a {
      color: blue;
   }
   a:hover {
      color: gray;
   }
   .box {
      font-size: 20px;
   }
   .box-area {
      font-size: 16px;
   }
  

   a {
      color: blue;
      &:hover {
        color: gray;
      }
   }
   .box {
      font-size: 20px;
      &-area {
        font-size: 16px;
      }
   }
  

---

4. import

• @import 지시어를 활용하여 다른 Sass(SCSS) 파일을 불러올 수 있다.
• 모듈화 함으로써, 코드를 구조화할 수 있다.

---

5. extend

• @extend 지시어를 활용하여 다른 선택자의 속성을 상속받을 수 있다.
• 이제 , 필요없이 상속으로 부여 가능하다.
  CSS와 비교하여 보기

   .box,
  .success-box {
    border: 1px solid gray;
    display: inline-block;
  }
  
  .success-box {
    border: 1px solid green;
  }
  

  .box {
    border: 1px solid gray;
    display: inline-block;
  }
  
  .success-box {
    @extend .box;
    border: 1px solid green;
  }
  

• 선택자 % 사용 시, 컴파일되지 않고 상속만 함!
  CSS와 비교하여 보기

  .success-box,
  .error-box {
    padding: 0.5em;
  }
  
  .success-box {
    color: green;
  }
  
  .error-box {
    color: red;
  }
  

  %box {
    padding: 0.5em;
  }
  
  .success-box {
    @extend %box;
    color: green;
  }
  
  .error-box {
    @extend %box;
    color: red;
  }
  

---

6. Mixin

• 공통으로 사용하는 CSS 속성을 묶어 재사용할 수 있는 기능으로, 함수같은 역할을 한다.
• 파라미터를 받아서 사용할 수 있다.
• 선언은 @mixin으로, 사용은 @include로 한다.

  @mixin func($color, $size) {
    color: $color;
    font-size: $size;
  }
  h1 {
    @include func(gray, 16px)
  }
  

• 다음과 같이, 기본값 적용도 가능하다.

  @mixin func($color: #000, $size: 16px) {
    color: $color;
    font-size: $size;
  }
  

---

7. 커스텀 함수

• @mixin과 다른 실제 함수를 정의할 수 있는 기능이 있다.
• 정의는 @function으로, 반환 값은 @return으로 받는다.

  $a-width: 40px;
  $b-width: 10px;
  @function grid-width($n) {
     @return $n * $a-width + ($n - 1) * $b-width;
  }
  
  #sidebar { width: grid-width(5); } // @include를 쓰지않고 사용
  

---

8. 조건문과 반복문

• @if와 @else를 사용함으로써, 조건문을 작성할 수 있다.

  @mixin boxcolor($n) {
    @if $n % 2 == 0 { color: white; }
    @else { color: blue; }
  }
  .box { @include boxcolor(3); }
  

• @for, @each, @while을 사용함으로써, 반복문을 작성할 수 있다.
• @for 인덱스 from 시작인덱스 through 끝인덱스

  @for $i from 1 through 3 {
    .time-#{$i} {
      width: 2em * $i;
    }
  } // 1 부터 3 까지 반복한다.  
  

• @each 값 in 값들의 나열

  @each $country in kor, jpn, usa {
    .#{$country}-img {
      background-image: url('/image/#{$country}.png');
    }
  } // kor, jpn, usa 순으로 반복한다.  
  

• @while 반복조건

  $i: 10;
  @while $i > 0 {
    .heading-#{$i} {
      font-size: $i * 10px;
    }
    $i: $i - 2;
  } // 10부터 2씩 감소하여 반복한다.
  

---

✨ 출처

blog, SaSS & SCSS 소개 & 설치..

---