SCSS 기본 정리 - SCSS, CSS, Sass 1

📌 SCSS

• SCSS는 Sass3 버전부터 새롭게 등장
• SCSS는 Sass의 모든 기능을 지원하는 Superset
• SCSS는 CSS와 거의 비슷한 문법으로 Sass의 기능을 사용할 수 있어서 편리함

📚 CSS의 단점

CSS는 복잡한 언어는 아니지만 작업이 커지거나 코드가 많아지면 불편함이 생김
-> 유지보수가 어려워진다는 단점이 있음

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

📚 SASS(Synthetically Awesome StyleSheets)

• Sass는 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 CSS 전처리기 언어임
• CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스트립트 언어라고 생각하면 됨

CSS 전처리기(Preprocessor) 언어 란?
- Sass, Less, stylus 이것들이 바로 CSS 전처리기
- 전처리기 언어는 CSS 문법과 굉장히 유사하지만 선택자 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있음.
=> 코드 작서에 드는 시간을 줄여주고, 코드를 유지 관리하는데 도움이 됨
❓사용법
- Sass, Less, Styleus 와 같은 전처리기 언어는 직접 동작시키는게 아님
  => why? 웹은 CSS밖에 모르기 때문
- 우선 전처리기 언어 문법으로 작성(코딩)하고, CSS로 컴파일해서 웹으로 동작시키는 것
   => 자바스크립트와 타입스크립트 관계라고 봐도 무방함

✅ 전처리기 언어 즉, Sass는 CSS의 대체 언어가 아님!!
     Sass는 CSS의 확장 전처리기 언어이고, 이는 결국 CSS 코드를 생산해내기 위해 사용하는 일종의 도구인 셈
     Sass가 제공하는 문법을 기반으로 코드를 작성한 다음, 이를 컴파일해 CSS 파일을 빌드하는 것이 Sass를 통해 스타일시트를 만듦

❗️Sass(SCSS)의 장점

• CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 잇음
  -> 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 됨
• 스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있음
• CSS의 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공함
  • 변수의 사용
  • 조건문과 반복문
  • Import (모듈화)
  • Nesting(선택자 반복 작성 줄여주는 기능)
  • Mixin(함수 개념)
  • Extend / Inheritance(확장/상속)
• 선택자의 중첩(Nesting)을 통해 반복되는 부모요소 선택자 사용을 줄일수 있음
• 변수(Variable)을 사용해서 CSS 속성값을 통일해서 관리할 수 있음
• 프로그래밍 언어에서 사용하는 조건문, 반복문을 통해 동적으로 CSS 곤리가 가능함
• 상속되는 선택자를 계층적으로 명시하여 불필요한 반복적 사용을 줄일 수 있음

❗️Sass(SCSS)의 단점

• 전처리기를 위한 도구 필요
• 컴파일 시간 소요

📚 Sass 와 SCSS의 차이점

• Sass : 중괄호가 아닌 들여쓰기를 사용함
• SCSS : CSS처럼 {} 와 ;을 사용함

/* SASS */
$color: red
$color2: pink

a
  color: $color
  &:hover
  	color: $color2

/* SCSS */
$color: red;
$color2: pink;

a {
  color: $color;
  &:hover {
  	color: $color2;
  }
}

/* CSS */
a {
  color: red;
}
  a:hover {
  	color: pink;
  }

• 확장자
  - *.scss / *.sass 확장자에 따라 Sass 문법으로 할지 SCSS로 할지 달라짐
• 믹스인(mixin)문법
  minxin(재사용 가능한 기능을 만드는 방식)이 ㅇㅆ음
  • Sass의 경우 = 로 선언하고 + 로 적용시킴
  • SCSS의 경우 @mixin으로 선언하고 @include로 적용시킴

/* SASS */
@main-font: "..."

=title($font)
  font-size:30px
  font-family: $font
  
#header
  +title($main-font)

/* SCSS */
@main-font: "..."

@mixin title($font){
  font-size:30px;
  font-family: $font;
}

#header{
  @include title($main-font)
}

📌  Sass 대신 SCSS쓰는 이유

• SCSS 2010년 5월 크롬버전3로 업그레이드하면서 갖춰진 새로운 문법 체계
• CSS 문법을 SCSS 문법 안에서 사용할 수 있으므로, CSS 핵과 IE의 filter와 같은 특정 브라우저 벤더용 문법도 포함하여 CSS가 지원하는 모든 문법과 기능을 SCSS에서 그대로 사용할 수 있음
• 이러한 호환성 덕에 모든 CSS 라이브러리를 그대로 이어서 사용할 수 있고, 기존 CSS를 SCSS로 전환하는 작업을 쉽게 시작할 수 있음

=> 전 세계적으로 SCSS 사용자 수, SCSS를 활용한 라이브러리&프레임워크 수가 SASS보다 많음

• 공식 문법
  공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여줌
• 더 넓은 사용자 
  다수의 라이브러리, 프레임워크가 SCSS문법을 활용하는 등 새로운 문법이 더욱 널리 쓰임
• CSS 호환성
  친근한 CSS 문법은 Sass와 CSS 사이의 틈을 줄여주고, 기능적으로도 확정성을 높임
• 여러 줄 쓰기 지원
  Sass 문법은 들여쓰기와 줄 바꿈이 문법의 중요한 요소이기 때문에 여러 줄 쓰기를 지원하지 않음

❗️❗️but, 완전히 동일한 기능을 갖고 있기 때문에 어느 것을 사용할지는 파이썬 구문 스타일에 익숙하면 Sass를, 자바스크립트 구문 스타일에 익숙하면 SCSS를 사용하면 됨