SASS

1. SASS란 무엇인가?

 

 syntactically awesome stylesheets의 약자로 웹 디자인을 하기 위한 언어로 사용된다. CSS의 가독성과 유지보수를 편리하게 다룰 수 있다는 장점을 가지고 있다.  SASS에 대해 자세히 알고자 한다면 아래의 주소를 방문하는 것을 추천하다.

 

 

 

 

 

 

 

 

https://sass-guidelin.es/ko/

Sass Guidelines — Korean translation

 

 

2. 확장자 

 

SASS를 이용할 경우에 2가지의 확장자를 사용할 수 있다. 첫 번째는. sass/이다. 처음에 SASS가 등장하였을 때, 주로 사용하였다. 다음 SASS의 예시 코드이다.

 

nav
  ul
    margin: 0
    padding: 0
    list-style:0

 

위의 코드를 보면 기존에 우리가 사용한 CSS와 차이가 느껴질 것이다. { }가 등장하지 않고 , 로 명령어를 구분하지도 않는다. CSS와 비슷하지만 묘하게 다른 구석 때문에 개발자들은 많은 혼란을 느꼈다. 그래서 등장한 것이. SCSS이다.

 

 

nav ul{

margin: 0;
padding: 0;
list-style: 0;

}
   

 

위의 코드는 SCSS를 통해 작성된 것이다. 구글에서 SASS Basic을 검색하면 더 많은 예시를 통해 차이점을 알 수 있을 것이다. 

 

 

우리는 SASS와 SCSS를 둘 다 사용할 수 없기에 REACT에 SCSS를 통해 컴포넌트를 꾸며보도록 하겠다. 직접 사용하면서 SCSS가 주는 이점들을 체험적으로 알아가도록 하자.