SASS

 

 

 

 

https://sass-lang.com/

Sass: Syntactically Awesome Style Sheets

 

 

 

Sass 란?

   Syntactically Awesome StyleSheets 의 약자로, 컴파일에서 Css 파일을 만드는 스타일 시트 언어입니다.

   Sass를 사용함으로서, 가독성, 유지보수, 성능, 중복코드 방지 등 다양한 면에서 이점을 얻을 수 있습니다.

   - nesting 구조

/* css */
p{
    color: red;
}

p span {
   color: blue;
}

a:hover, a:focus{
    color: blue;
}



/* Sass */
p
    color: red
    
    span
        color: blue

a
    &hover,
    &focus
        color: blue

      : 들여쓰기를 사용한 중첩구조입니다.

      : 여러가지 선택자 또한 &로 묶어 표현할 수 있습니다.

      : nesting 구조때문에 Sass를 사용할 때 indent 를 주의하여 작성해야 합니다.

 

 

Scss

/* Sㅊss */
p {
    color: red
    
    span {
        color: blue
    }
}
a {
    &hover,
    &focus {
        color: blue
    }
}

   - Sassy css의 약자로, Sass의 문법에서 css의 중괄호를 사용하여 css같아진 Sass입니다.

   - 기존 indent에 의존하여 공백에 의한 컴파일 에러가 발생할 수 있던 Sass환경에 중괄호를 추가하여

      컴파일 에러가 발생할 확률을 현저히 줄인 언어입니다.