[SCSS] 소개 & 사용법

css와 sass(scss)의 차이점

CSS의 단점

1. 작업이 커지고 코드가 많아질수록 불편함이 생기게 된다.
2. 유지보수가 어려워질 뿐만 아니라 프로그래밍에서 가장 흔한 조건문이나 반복문 조차도 문법을 지원하지 않아 '복사&붙여넣기'만 주구장창 해야되는 수준
3. 선택자(selector)를 만들때 매번 불필요한 부모요소 선택자를 적어야함
4. function 같은게 없으니, 규모가 큰 프로젝트의 경우 자동화하기 어렵고 모든 것을 수동으로 변경해야함

이외의 여러가지 불편한 요소들이 있어, 이 단점을 해결해 줄 수 있는게 scss이다!

---

SCSS란

scss는 Syntactically Awesome StyleSheet의 약어이며
코드 재활용성을 올리고 가독성을 올리는 등 CSS의 단점을 보완하고,
개발 효율을 올리기 위해 등장한 CSS 전처리기 언어이다.
CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어라고 보면 된다.

CSS전처리기(Preprocessor) 언어란?

css전처리기는 Sass, Less, stylus 이다.
전처리기 언어는 css문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산등 표준 css보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있다.
따라서 코드 작성에 드는 시간을 줄여주고, 코드를 유지하는데 도움을 준다.

---

사용 방법

sass, Less, Stylus 같은 전처리기 언어는 직접 동작시키는게 아니다.
웹은 css밖에 모르기 때문에 전처리기 언어 문법으로 코딩하고,
CSS로 컴파일해서 웹으로 동작 시켜야한다.

전처리기 언어 즉, Sass는 css의 대체 언어가 아닌 확장 전처리기 언어이고,
이는 결국 css코드를 생산해내기 위해 사용하는 일종의 도구인 셈이다.

/*scss로 작성했을 때*/
$gray: #333;
.header {
	color: $gray;
    &__inner {
    	border:1px solid red;
    }
 }


/* 컴파일 됐을때 */
.header {
	color: $gray;
  }
.header__inner {
   	border:1px solid red;
   }

---

Sass(scss)의 장점

1. css보다 심플한 표기법으로 css를 구조화 하여 표현할 수 있다.
2. 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다.
3. css의 태생적 한계를 보완하기 위해 scss는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.

• 변수의 사용
• 조건문과 반복문
• import (모듈화)
• nesting (선택자 반복 작성 줄여주는 기능)
• Mixin (함수 개념)
• Extend/Inheritance (확장/상속)

4. 선택자의 중첩(nesting)을 통해 반복되는 부모요소 선택자 사용을 줄일 수 있다.
5. 변수(Variable)을 사용해서 css 속성값을 통일해서 관리 할 수 있다.
6. 프로그래밍 언어에서 사용하는 조건문, 반복문을 통해서 동적으로 css 관리가 가능하다.
7. 상속되는 선택자를 계층적으로 명시하여 불필요한 반복적 사용을 줄일 수 있다.

장점 말고 단점은 전처리기를 위한 도구가 필요하며, 컴파일 시간이 소요된다는 점...

---

Sass & SCSS 차이점

1. 확장자
   Sass와 Scss는 다른 파일이다 (.sass, .scss)

2. 구문 스타일
   Sass는 파이썬과 같이 들여쓰기를 사용한다.
   scss는 css와 같이 중괄호{}, 세미콜론(;)을 사용한다.

/*sass 사용*/
$color: red
$color2: blue

a
	color:$color
    &:hover 
    	color:$color2
        
        
/*scss 사용*/
$color: red;
$color2: blue;

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

3. mixin
   sass는 = 로 선언하고 +로 적용시킨다.
   scss는 @mixin으로 선언하고 @include로 적용시킨다.

/*sass*/
$main-font:"noto"

=title($font)
	font-size:30px
    font-family: $font
    
 #header
 	+title($main-font)
    
    
 /*scss*/
 $main-font:"noto";

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

---

SCSS설치 & 컴파일 방법

1. CLI를 이용한 실행

• 우선 CLI를 사용하기 위해 아래의 명령어로 sass를 설치해준다.

$ npm install -g sass
or 
$ yarn add -g sass

• 작성한 css파일명을 common.css 라고 가정했을때 아래와 같은 명령어로 컴파일 해준다.

$ sass common.scss:common.css

• 만약 특정 디렉터리 내의 모든 scss 파일을 css파일로 일괄 트랜스파일링해서 지정한 디렉터리에 저장하려면 다음과 같이 인풋 디렉터리와 아웃풋 디렉터리를 지정해야된다.

$ $ sass src/sass:dist/css

2. VScode Extension을 이용한 실행 (이방법이 가장 쉽고 추천!)

• VScode > Extension > Live Sass Compiler 설치하면 된다.
• 설치가 끝나면 하단에 Watch my Sass라는 아이콘이 생기는데 이를 클릭하면 sass파일을 css파일로 컴파일 해준다.
  watch my sass를 끄게 되면 파일을 수정해도 업데이트가 안되니 이 부분 꼭 확인!

* scss / css 폴더 분리
설정에서 scss에서 컴파일된 css파일은 (css)폴더에 저장 되게 처리하면 프로젝트 트리 구성을 정리하는데 도움이 된다.

setting.json을 열고 아래와 같은 코드를 추가해준다.

{
    "liveSassCompile.settings.generateMap": false, // 만일 .map 파일 생성을 끄고 싶다면
    "liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "~/../css" //CSS 경로 설정 
    }
    ],
    "liveServer.settings.donotShowInfoMsg": true
}

---