Sass

Sass

1. Sass(Syntactically Awesome Style Sheets)

 - 웹 개발에서 사용되는 CSS 전처리기(Preprocessor)

 - CSS의 기능을 확장하고, 개발자가 더 효율적으로 스타일을 작성할 수 있도록 도와줌

 

2. Sass의 특징

 - 기존의 CSS 구문을 확장하여 변수, 중첩 규칙, 믹스인(mixin), 상속 등의 기능을 제공

 - 시타일 시트 작성을 간소화

 - 코드의 재사용성과 유지보수성을 향상

 - 복잡한 스타일 구조를 간결하게 표현하여, 프로젝트의 개발 속도를 향상

 

3. Sass의 문법

 - Sass는 두가지 문법을 제공

    - SCSS (Sassy CSS)

        - 기본의 CSS와 비슷한 문법을 사용하며, 확장된 기능을 적용할 수 있음

        - 중괄호('{ }')와 세미클론(';')을 사용하여 스타일 규칙을 정의

        - 속성과 값은 기존 CSS와 동일한 방식으로 작성

.container {
  width: 100%;
  padding: 20px;

  h1 {
    font-size: 24px;
    color: $primary-color;
  }

  p {
    font-size: 16px;
    line-height: 1.5;
  }
}

 

    -  Sass

        - 들여쓰기를 사용하여, 블록과 속성을 구분하며, 스타일 규칙의 구조를 나타냄

        -  중괄호 ('{ }')와 세미클론(';')을 사용 X

.container
  width: 100%
  padding: 20px

  h1
    font-size: 24px
    color: $primary-color

  p
    font-size: 16px
    line-height: 1.5