패스트캠퍼스 챌린지 24일차 - 리액트 스타일링하기 Sass(Scss)

 

Sass(Syntactically Awesome Style Sheets)

 

#sass 설치하기
npm install sass

 

Sass는 css의 확장을 도와주는 전처리기이다.

때문에 공식문서의 가이드를 보면 Sass를 사용 후 애플리케이션이 실행될때 css로 치환된 내용도 함께 보여준다.

 

 

DRY(Don't Repeat Yourself)하지 않은 css를 sass로 작성하면 반복하여 작성해야되는 코드를 확 줄일수 있다.

Sass 공식문서를 보면 SCSS도 같이 나와있고 심지어 SCSS를 default 값으로 코드를 보여준다.

 

Sass와 SCSS는 동일한 기능을 제공하지만 SCSS에서 CSS를 사용하던 방식과 유사하게 중괄호와 세미콜론을 이용하여 보기 쉽고,Sass는 좀더 간결하게 작성되어있다. (강사님은 SCSS 기준으로 강의를 진행하셨고 나도 SCSS가 보기 편하다)

 

본 포스팅에서는 Sass는 SCSS 문법을 사용하는 것을 의미한다. (확장자도 .scss)

 

강의에서 컴파일러 소개는 하지 않았지만 Sass로 작성한 코드가 내가 원하는대로 css 적용되었는지 SassMeister에서 컴파일 테스트를 할 수도 있다.

 

 

SassMeister | The Sass Playground!

 

 

javascript처럼 변수를 선언할수 있고, 함수도 만들수 있다.

심지어 모듈처럼 다른 파일을 @use나 @import하여 해당 파일에서 선언한 변수를 가져와서 사용할 수도 있다.

 

그래서인지 size가 다른 라이브러리에 비해 큰데도 다운로드가 1위이다.

각 라이브러리마다 장단점이 있기 때문에 상황에 맞는 라이브러리 선택이 중요하다.

 

강사님의 경우,

반응형 웹을 대응하기 위해 media query를 많이 쓰고 design system이 없는 곳에서는 sass를,

개발 편의성 면에서는 CSS in JS를 적용한 emotion을 사용할 것 같다고 한다.

 

웹 최적화(성능)면에서 사용한 라이브러리(번들)의 사이즈가 점점 중요해지는 시점이기에 개발자 입장에서는 emotion을 선택하는게 맞을 것 같지만,

아직 공식문서에서 안내된 예제만으로는 스타일링하는데 어떤 라이브러리를 사용하는게 좋은지 잘 모르겠다.

강의를 다 듣고 나서 여러가지 실험을 해봐야될 것 같다.

 

 

 

 

 

 

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.