CSS / SASS / SCSS

⭐️ CSS / SASS / SCSS ⭐️

---

01. CSS 란?

CSS (Cascading Style Sheets)는 마크업 언어로 작성된 HTML 문서가 실제로 웹사이트에 표시되는 방법을 정해주는 스타일 시트 언어를 의미합니다.
CSS는 문서의 각 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지를 지정합니다.

02. SASS / SCSS

SASS 와 SCSS 는 CSS 의 기능 부재 및 단점을 보완하여 다양한 기능을 추가한 확장판 스크립트 언어입니다.
SASS 는 중첩으로 들여쓰기 및 줄바꿈 형식이고, SCSS 는 중괄호 및 세미콜론 형식 입니다.
SASS 보다 SCSS 가 CSS 와의 호환성이 더 좋습니다.

   ___ 참고하기 ___
  `1   SASS (Syntactically Awesome Style Sheets)는 '문법적으로 어썸한 스타일시트'라는 뜻입니다.
  `2   SCSS (Sassy CSS)는 '문법적으로 짱 멋진(Sassy) CSS'라는 뜻입니다.
  `3   CSS가 복잡한 언어는 아니지만, 프로젝트의 크기가 커지고 고도화될수록 유지보수에 큰 어려움이 생깁니다. SASS 와 SCSS 는 이러한 이슈를 해소시켜줄 수 있습니다.

---

03. SASS / SCSS 에서 제공하는 기능

[1] 변수(Variable) 할당

자주 사용하는 색이나 폰트 등을 변수로 지정하여 재사용합니다.
SASS 는 $ 기호를 사용하여 변수로 만듭니다.

  $font-stack: Helvetica, sans-serif;
  $primary-color: #555;
  
  body {
    font: 100% $font-stack;
    color: $primary-color;
  }

[2] 중첩(Nesting) 구문

중첩 기능을 통해 쉬운 구성과 높은 가독성을 가질 수 있습니다.

  nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
  
    li { display: inline-block; }
  
    a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }
  }