[CSS] "SASS ⊃ Sass, SCSS" 에 대해 알아봅시다!

SASS에 대해 알아봅시다!

: CSS의 단점을 보완하기 위해 만든 CSS 전처리기입니다.보통 CSS를 사용하다보면 단순 반복되는 부분이 많은 등, 불편함이 느껴지기 마련인데, SASS는 이 부분을 거의 완전하게 해소시켜주는 스타일 언어입니다. SASS에는 Sass와 SCSS가 있습니다.

: CSS의 확장팩 같은 언어이기 때문에 CSS 파일 그 자체를 SCSS로 확장자만 바꾸어줘도 정삭적으로 작동합니다.
다만, SASS자체는 개발자용 언어이기 때문에 웹브라우저가 읽을 수 없습니다.
따라서, 중간에 컴파일러를 거쳐서 CSS로 변환하여 HTML에 연결해야 합니다.

---

★ CSS의 단점 ★

: 선택자(Selector)을 만들 때 매번 불필요한 부모요소 선택자를 적어야 합니다.
: function 같은게 없으니, 규모가 큰 프로젝트의 경우 자동화하기 어렵고 모든 것을 수동으로 변경해야 합니다.
: 결국 중복되는 코드가 많아 코드 줄 수가 길어져 유지보수에 마이너스적인 요소가 됩니다.

★ CSS와 SASS의 차이 ★

CSS 내에서 변수 처리 유무 : SASS를 쓰는 가장 큰 이유!

✔️일반적인 CSS 문법

.box ul {
    width: 300px;    
}
.box ul li {
    color: #000;
    background: url("./image.jpg");
}
.box ul li:last-child {
    margin-right: 10px;
}

✔️SASS 문법

브라켓이 {}이 없으니 ※주의※

.box ul {
    width: 300px
    li
      color: #000
      background: url("./image.jpg")
      &:last-child
        margin-right: 10px

★ SASS와 SCSS의 차이 ★

SCSS는 SASS 버전이 업데이트되면서 기존 CSS와 호환성을 높이기 위해서 도입된 문법

★ 여기서 잠깐! SCSS란? ★

: Sass의 3버전에서 등장한 언어
: CSS와 완전히 호환되도록 새로운 구문을 도입한 CSS의 상위 호환 스타일 시트

✔️SASS, SCSS에서 기존의 CSS의 기능 부재 단점을 보완한 다양한 기능 추가
✔️SASS는 들여 쓰기 + 줄 바꿈 형식, SCSS는 중괄호 + 세미클론 형식

---

Sass 변수(Variables)

: Sass를 사용하는 가장 직접적인 방법은 값을 변수에 담아 사용하는 것입니다.
직접 값을 입력하는 대신 변수를 사용하면 같은 목적의 값을 하나의 변수로 관리하며 여러 곳에 할당할 수 있고, 실수로 값을 잘못 입력할 경우를 줄여주며, 값을 수정하기도 훨씬 쉬워집니다!

👌변수($) 정의하기
: 변수 이름은 반드시 $ 기호로 시작합니다. → 변수가 어떻게 어디서 사용되는지 한 눈에 알아볼 수 있음!
👌변수($) 사용하기
: 다양한 곳에서 사용할 수 있지만 가장 기본적인 사용법은 속성값으로 할당하는 것입니다.
👌변수($) 범위
: 전역과 지역

★ SCSS Sass → CSS ★

예시를 통해 같은 SCSS와 Sass의 변수와 CSS 변수는 어떤 차이가 있는지 알아봅시다.

✔️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;
}