SCSS에 대해 알아봅시당~~

SCSS란?

sass란 Syntactically Awesome Style Sheets의 약자로 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

CSS 기존 사용 예시

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

---

SCSS : NESTING 이란?

간단히 말해부모 요소 안에서 자식 요소를 넣어 짜는것입니다.

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

---

operators 란?

연산자	설명
+	더하기
-	빼기
*	곱하기	하나 이상의 값이 반드시 숫자여야함
/	나누기	오른쪽 값이 반드시 숫자여야함
%	나머지