SCSS

Sassy Cascading Style Sheets

Sass(Syntatically Awesome Style Sheets)의 한 문법, CSS를 확장한 스타일링 언어
CSS의 기능을 확장하고, 효율적인 스타일링 작업을 지원하기 위해 설계됨

주요 특징

1. CSS와 100% 호환
   기존 CSS파일을 SCSS로 변환없이 사용 가능

2. 변수 사용 가능
   $를 사용해 값을 변수로 정의할 수 있어, 반복되는 값의 재사용과 유지보수가 용이함

   $custom-color:#3498db;
   body{
   	color: $custom-color;
   }

3. 중첩(Nesting)의 간결화
   선택자 간의 계층 구조를 간결하게 표현할 수 있어 가독성이 높아짐

   nav {
     ul {
       margin: 0;
       padding: 0;
   
       li {
         list-style: none;
   
         a {
           text-decoration: none;
           color: $primary-color;
         }
       }
     }
   }

   ↓ css 컴파일

   nav ul {
     margin: 0;
     padding: 0;
   }
   
   nav ul li {
     list-style: none;
   }
   
   nav ul li a {
     text-decoration: none;
     color: #3498db;
   }
   

4. 재사용성
   스타일을 재사용하고 코드중복을 줄일 수 있음

   • Mixin : @mixin은 재사용 가능한 스타일 블록을 정의하는데 사용됨
     @include로 호출하여 적용

     @mixin box-shadow($color){
     	box-shadow: 0 4px 6px $color;
     }
     .card{
     	@include box-shadow(rgba(0,0,0,0.2));
     }

   • Extend(상속) : @extend를 사용해 기존 클래스의 스타일을 다른 클래스에 상속 가능

       %button-style{
           padding: 10px 20px;
           border: none;
           cursor: pointer;
       }
       .primary-button {
         @extend %button-style;
         background-color: $primary-color;
         color: white;
       }
     
       .secondary-button {
         @extend %button-style;
         background-color: $secondary-color;
         color: white;
       }

5. 연산/조건문/반복문 지원
   SCSS는 동적, 논리적 스타일 작성이 가능

장점

1. Mixin, Extend, 변수를 활용한 코드의 재사용성
2. Nesting과 변수를 활용한 가독성 및 유지보수성
3. 프로그래밍적 접근(조건문/반복문/연산)을 통한 동적 스타일링

단점

1. 컴파일 필요 : 프레임 워크에 세팅필요
2. 학습 난이도 존재
3. 명확한 코딩 컨벤션 필요