#018. 문법적으로 짱짱 멋진 스타일 시트 SASS와의 만남

😎 오늘의 잘한점

액션

미루고 미뤄왔던 현재 나의 상태와 계획을 점검했다.

칭찬

요즘 우선 순위가 정하기 어려워서 고민하던 중에, 같이 교육을 듣고 있는 멋사 교육생분께 고민을 말씀드렸더니 현재 하고 계시는 방법을 말씀해주셨다!

목표로 하고 있는 내용 혹은 알아야할 키워드를 카테고리 별로 정리한 다음, 우선 순위를 정해서 완료한 것들은 지워나가는 식의 방법을 추천해주셨다.

그래서 주신 의견과 조합하여 노션에 정리해나갔다.

먼저 해야할 일, 과제를 구분해서 작성하고 그 날의 우선 순위를 작성했다.

 

그리고 현재 계획의 진행도를 보고자 계획 및 목표들을 카테고리 별로 정리하고자 했다.

이렇게 한 눈에 정리하고 보니 새삼 많은 일을 벌여놨구나 싶었다...ㅎㅎ

아직은 초반이라 정리가 어수선하지만 더 세분화 된 내용을 추가해서 체계적으로 관리해보고자 한다!

미뤄왔던 일을 끝내니까 속이 후련했고, 앞으로 더 잘 달리기 위해 어떤 식으로 나아가야할지 고민해볼 수 있게 되었다😀

---

✔️ 오늘의 개선점

문제

-

원인

-

액션 플랜

오늘은 별다른 문제가 없던 무난무난한 날이었다🌤️

---

💡 오늘의 배운점

배움

Sass(Syntactically Awesome Styled Sheets)

• Sass를 직역하게 되면 문법적으로 짱 멋있는 스타일 시트이다.
• Sass 공식 문서에서는 Sass를 CSS 확장 언어라고 한다.
• 사실 브라우저는 .sass 파일을 해석할 수 없기 때문에 전처리기 처리 과정을 통해 .sass 를 .css 파일로 컴파일해주어야 한다.
• vscode extension - Live Sass Compiler
  • vscode 확장 프로그램을 설치하여 vscode 하단에 생성된 Watch Sass 탭을 이용한다.

• node.js로 sass 설치
  • 설치: npm install -g sass
    컴파일 명령어: sass --watch input.scss output.css

node-sass 패키지와 sass 패키지의 차이
Sass는 2006년 Ruby로 처음 개발되었고 이후 Ruby Sass를 C++로 포팅한 Libsass, node.js 환경에서 Libsass를 사용할 수 있는 node-sass 등 다양한 포팅 버전이 등장했다.
Sass는 최근에 Dart Sass로 재구현되었으며, Libsass나 node-sass는 현재 유지 관리는 되고 있으나 폐지되었으므로 Dart Sass를 사용하면 된다.

Sass - Basics | PoiemaWeb

• .sass와 .scss의 차이
  • Sass와 Scss 모두 동일한 css 파일로 컴파일 된다.
  • 다만 Sass는 css에서 사용했던 중괄호 대신 들여쓰기를, 세미콜론 대신 줄 바꿈을 사용하고 Scss는 일반적인 CSS와 동일하게 사용된다.
  • 주로 CSS와 비슷한 Scss 구문을 많이 사용한다.

// .scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// .sass
$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

• 파일명 앞에 언더바(_) 붙이기
  • 파일명이 언더바(_)로 시작하는 파일은 main 파일의 일부분임을 알려주어서 해당 파일은 css 파일로 컴파일되지 않고 내부에서 @import 형태로 작동한다.
  • css는 import시 파일 URL을 작성해주어야 하지만, Sass에서는 파일명만을 사용할 수 있다.
• 주석 처리
  • //를 사용한 한 줄 주석은 Sass 파일 내에서만 보여지고,
    /* */를 사용한 여러 줄 주석은 Sass 파일이 컴파일 된 css 파일에서도 보여진다.
• 변수
  • Sass는 $ 기호를 사용하여 변수를 선언할 수 있고, 사용할 때에도 $변수명 형태로 사용된다.

의미

예전에 노마드코더 강의를 들었을 때 잠깐 Sass를 다룬 적이 있었는데 그 때는 솔직히 왜 Sass를 사용하면 좋은지 크게 와닿지는 않았다.

최근 들어 제대로 된 시멘틱 마크업을 해보면서 반복적인 CSS 파일 작성, CSS 파일에 명시적으로 작성되는 클래스명 등 불편한 점이 많았다.

개발자는 반복을 줄여가며 코드의 길이를 줄일 수 있어야 하는데 이를 Sass가 가능할 수 있게 만들기 때문에 Sass를 사용하는구나 싶었다!

예전과 다르게 차이점이 와닿아서 '나 조금 성장했나?' 느낄 수 있었던,, 괜시리 혼자 뿌듯했던 배움이었다😆