🧹 css를 정리정돈해보자! | Sass(Scss)

CSS를 계속해서 작성해나가다보면, 코드가 길어질 수밖에 없는데요🤔
길어질 수록 가독성이 떨어지기 때문에 내가 찾고자 하는, 수정하고자 하는 style을 단번에 찾기가 정말 힘들 겁니다😥

그래서 이 점을 해소하고자 등장한 고마운 청소부가 있는데요.🧹
바로 Sass(Scss)입니다.🎉
'Syntactically Awesome Style Sheets'
이름부터 구문론적으로 멋진 스타일 시트군요!😎

Sass는 CSS의 아쉬운 점인 '변수, 중첩, 함수' 등을 제공해주기 때문에 CSS의 코드를 좀 더 깔끔하게 정리정돈할 수 있겠죠? (정말 멋진 스타일 시트임이 틀림없습니다...!✨)
저희 블로그 프로젝트에서는 아직 '중첩' 문법만 사용하여 코드를 정리했는 데도 확실히 가독성이 좋아진 느낌이 듭니다!👍

영상을 통해 Sass(Scss)의 장단점과 추천 문법을 좀 더 자세히 알아보도록 해요!🧐

📍Time stamp
0:00 인트로
0:25 CSS란?
1:00 Sass(Scss)란?
1:42 Sass vs Scss
2:09 Scss 추천 문법 1 | • Nesting (중첩)
2:35 Scss 추천 문법 2 | • Variables (변수)
2:53 Scss 추천 문법 3 | • Mixins (재활용)
3:22 Scss 추천 문법 4 | • Functions (함수)
3:33 프로젝트 적용 예시
4:06 마무리

💡영상에 나온 포스팅을 보고싶다면?
CSS란 무엇인가 | https://nerd-animals.github.io/na-log...
CSS vs Sass(Scss) | https://nerd-animals.github.io/na-log...
Scss 문법 | https://nerd-animals.github.io/na-log...

🤔함께 고민해봐요!
내용이 틀렸거나 하다가 막히는 부분이 있다면 댓글로 남겨주세요.
영상 속도가 빠르거나 음량이 작다든지의 피드백도 좋습니다!