📌 SASS(Syntactically Awesome StyleSheets) - 문법적으로 어썸한 스타일 시트..ㅎ
1) 정의 : CSS 전처리기로서 CSS 반복을 줄여 시간을 절약할 수 있도록 해주는 CSS 언어의 확장언어
2) 장점 : 변수 및 조건문 등의 새로운 문법을 총해 CSS를 구조화하여 작업할 수 있다.
진짜 개애애ㅐㅐㅐ편합니다.
3) 단점 : 코드가 복잡해질 수 있고, 코드가 많아질수록 유지보수가 어렵다.
📌 Sass, Less, Stylus
그렇다면 CSS 전처리기는 하나만 있나??
아뇹.SASS를 제외하고도 Less랑 Stylus라는 유명한 것들이 있다.
SASS랑 비슷한 일을 하지만 사용하는 문법도 다르고 작동 방식도 다르다.
요런 차이가 있다고 보면 된다!! 어떤 것을 선택할지는 당신의 선택입니도...!
📌 Sass 와 SCSS
위에 표에 보면 Sass (SCSS)라고 적어놨는데 둘이 뭐가 다른지 궁금할 수도 있는데
사실 둘이 거의 같다고 보면 된다! 문법이 살짝 다르긴 하지만 거기서 거기..
Sass에서 조금 더 편하게 쓰도록 도입된 것이 SCSS 문법이고 SCSS는 기존 CSS 방식과 유사하기 때문에
보통 실무에서는 SCSS로 작업을 한다고 한다!!
(나도 Sass를 배웠지만 거의 SCSS로만 작업하고 파일의 확장자도 처음부터 .scss만 사용했다.)
📌 Sass 설치하기
Ruby SASS - Node Sass - Dart Sass 순서대로 점점 업데이트가 되어가는 것 같은데
지금 만약 당신이 sass를 시작할 사람이라면 Dart Sass로 시작하는걸 추천한다.
물론 아직 node sass 사용이 가능하지만 빠른 시일내로 dart로 다 넘어갈 것 같다. 😂
원래 21년도 9월부터 무조건 dart 쓴다고 했었는데 dart쓰는 사람 80% 넘으면 node 없앤다고 말바꿈
설치도 처음부터 할까 하다가 구글에 sass 설치 검색하면 친절한 사람들이 다 알려주십니다. 화이팅!
앗 근데 이거는 설치하쇼.
이거 설치하면 scss작업할때 밑부분에 그 Go Live처럼
진짜 딴 소린데 맥북 Go Live 안먹힘 죽고싶..
요런식으로 Watch Sass가 뜨고 사스 작업 하고 나서 저거 누르면 알아서 css파일로 컴파일해서 제작해줍니다.
아주 편하고 좋아요!!!!!!!
암튼 설치에 플러그인까지 깔아주면 vscode안애서 scss로 작업 굉장히 쉽게 시작할 수 있습니다!!!!!
