SASS

• CSS 전처리기
• SASS 공식 문서 https://sass-lang.com/

왜 사용할까?
css가 제공하지 않는 문법들을 이용해서 css를 편리하게 사용하기 위해서

1. 설치

• npm install node-sass --save 을 터미널에 입력해준다.
• --save 는 pakege.json의 dependencies에 자동적으로 저장이 되는 명령어이다.

2. .css 확장자 ➡️ .scss 확장자 변환

: .css로 저장된 파일을 .scss확장자로 바꿔준다.
: 프로그램은 SASS지만, 확장자는 .scss 이다.

3. Nesting 기능

: 부모 자식관계가 드러나도록 tag nesting 해주어야한다.
: 최상위 요소에 컴포넌트와 동일한 className 부여해서 Nesting하면 각 컴포넌트마다 스타일링이 겹치는 것을 방지할 수 있다.

📍 SASS 적용 이유가 불필요한 class 명을 줄여주고, 부모 자식간의 관계를 명확하게 하기 위함 때문이다.

📍 Nesting을 하면서 Refactoring을 할 수 밖에 없는 구조가 된다 ㅎ

📍 컴포넌트 요소로 온 <Link />에는 스타일 적용하지 않는다!!

📍 만약, 하나의 element에 두 개의 className이 온다면? Sibling 형태로 Nesting !

📍 부모요소는 다르고 자식요소에 동일한 스타일을 주고 싶을 때?

➡️ 상위 태그는 동일하지만 내부의 스타일을 동일하게 작성해주면 된다. 동일하게 반복되는 것이 싫다면, 변수화시키는 것도 하나의 방법일 것 같다.

4. 변수 활용

변수 관리 방법

• 일반적으로 공통 요소로 묶어서 관리한다.
  e.g) styles 폴더 내에서 변수들만 따로 관리하기 위해서 variables.scss 파일을 생성한다.

// `@import "경로/variables.scss"; 경로를 꼭 설정해 주어야한다`
$button-color : red; // 이곳의 값을 바꾸어 주면 전체적으로 적용된다.

.loginBtn {
color: $button-color;
}

5. & 연산자

: &는 부모와 연결되는 기능으로 hover나 가상 요소를 Nesting 할때 사용한다.

6. mixin 기능 적용

: @mixin @include : fair로 사용한다.

: 자주 반복되는 것을 적어두고 공통으로 사용할 수 있는 기능이다.
: @mixin을 scss 파일 상단에 적어 필요한 곳에 @include로 입력한다.

✏️ SASS를 적용해보며

SASS를 적용해보며 느낀점은 nesting이되어 각 element에 들어간 스타일이 무엇인지 한눈에 볼 수 있다는 점이 가장 좋았다. 아직 css보단 어색하지만 빨리 친해질 수 있는 날이 오도록 자주 사용해줘야겠다.🙌🏻