220910(토)

🪴 성장일지

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명

Project jaybnb

목표

• 홈 메인 화면 html 완성
• scss 학습 및 적용

SCSS

• SASS(Syntactically Awesome Style Sheets)
• SCSS(Sassy CSS)

CSS는 그렇게 복잡한 언어가 아니지만, 프로젝트의 규모가 커지고 복잡해질수록 CSS 유지 보수가 어려워지게 된다.
이러한 과정에서 SASS와 SCSS가 등장하였다.
위의 풀네임을 보면 알 수 있듯이 둘 다 기존의 CSS 문법을 더 어썸하고 멋지게 만든 것이다.ㅋㅋ
SASS가 등장하고 SASS3부터 SCSS가 등장하였는데, 기존의 CSS 문법과의 유사성 덕분에 현재는 SCSS가 더 범용적으로 사용된다.

npm install -g sass

// 다음과 같이 $를 사용하여 변수(상수)를 만들 수 있다.
$color-black: #000000;
$color-white: #ffffff;

// 아래와 같이 중괄호 + 들여쓰기를 통해 하위 선택자를 선택할 수 있다.
.class__first {
  .class__second {
    .class__third {
      color: $color-black;
    }
  }
}