리액트-SASS 사용방법

SASS는 CSS가 너무 길어졌을 때 변수, 함수, 반복문 등을 사용해서 보다 간결하게 코드를 작성할 수 있다.
터미널을 열고
npm install node-sass
yarn add node-sass
둘 중 하나를 설치해준다.
그리고 CSS파일명의 이름을 .scss 로 바꿔주고, CSS적용하고 싶은 js파일에 import 해준다.

SASS 사용법

1. 변수 사용

(Detail.scss)

$메인컬러 : #ff0000;

.red {
  color : $메인컬러;
}

$변수명 : 집어넣을값;

이렇게 변수를 만들어주고, 원하는 곳에 사용한다.
색상 말고도 px, % 등등 다 가능하다.

2. @import

CSS간에 import할 수 있는 문법으로,
@import './어쩌구.css';
해주면 된다.

body {
  margin : 0;
} 
div {
  box-sizing : border-box;
}

위와 같은 걸 reset 이라고 하는데, 자주 사용하는 기본 스타일을 설정해놓는 것이다.
위 스타일들을 한 파일에 저장해놓고, 필요할때마다 @import해올 수 있다.

3. nesting 문법

SCSS에서는 셀렉터를 길고 복잡하게

/*이런식*/
div .container h4 {
 color: blue;
}

쓰지 않는 방법이 있다.

div.container {
  h4 {
    color : blue;
  }
  p {
    color : green;
  }
}

셀렉터를 옆에 길게 나열하는 것이 아니라
안쪽에다가 작성해주는 것이다.
위와 같이 사용하는 이유는
1. 셀렉터의 해석이 쉽고
2. 관련된 class끼리 묶어서 관리하기 용이하기 때문

4. extends 문법

.my-alert {
  background : #eeeeee;
  padding : 15px;
  border-radius : 5px;
  max-width : 500px;
  width : 100%;
  margin : auto;
}

.my-alert 라는 알림창의 스타일을 만들었다.
그런데 다양한 색깔의 알림창이 여러개 필요하다면?
굳이 일일이 복붙할 필요 없이 @extends를 사용한다.

.my-alert {
  background : #eeeeee;
  padding : 15px;
  border-radius : 5px;
  max-width : 500px;
  width : 100%;
  margin : auto;
}
.my-alert-2 {
  @extends .my-alert;
  background: yellow;
}

@extends 클래스명
이렇게 사용하면 해당 클래스명에 있는 스타일이 알아서 복붙되어 따라온다.
코드를 재사용할 필요도 없고 비슷한 UI만들기에 유용하다.

5. @mixin / @include 문법

@mixin은 함수만드는 문법이라고 생각하면 된다.
SASS에서는 function 대신 @mixin 이라고 작성해주면 되고
중괄호 {} 안에 원하는 스타일을 넣어주면 된다.
그리고 함수를 불러올땐
@include 함수명() 해준다.

JS와 다르게 함수명이 위에 있어야 아래에서 사용이 가능하다!

그리고 파라미터, 반복문 등도 사용 가능하다고 한다.

@mixin 함수() {
  background : #eeeeee;
  padding : 15px;
  border-radius : 5px;
  max-width : 500px;
  width : 100%;
  margin : auto;
}
.my-alert {
  @include 함수()
}