리액트에서 CSS 작성법으로 Sass를 사용하기 위해 공부한 글

▶SASS란?

CSS를 조금 더 프로그래밍 언어스럽게 다룰 수 있게 해주는 pre-processor(전처리 문법 언어) 이다.
SASS를 활용하면 CSS에 변수,반복분,함수 등을 사용 해 중복되는 CSS코드를 줄일 수 있다.

리액트에서 CSS를 작성하기 위해 styled-component (Css-In-JS) 방식도 보았지만 옛날 사람인 나는 너무 불편하게 다가왔다.

SASS로 CSS를 편리하게 사용하면서 중복되는 클래스 명만 조심하자

▶설치

//터미널에
npm install node-sass

node-sass 설치는 되는데 미리보기 띄울 때 에러가 난다면

nodejs 14버전을 쓴다면 node-sass 지웠다가 4.14버전으로 설치하면 끝

1. 지우는건 npm uninstall node-sass 혹은 yarn remove node-sass

2. 설치는 npm install node-sass@4.14.1

nodejs 16버전 이상을 쓴다면

1. npm install node-sass 혹은 yarn add node-sass로 6버전 설치하고

2. node_modules 폴더랑 yarn.lock 혹은 package-lock.json 보이는걸 다 삭제

3. 터미널에서 yarn install 혹은 npm install로 node_modules 폴더 재설치 해주시면 잘 됨

실은 지금은 Sass 쓰시려면 nodejs 지우고 14버전 설치를 추천

브라우저는 SASS문법을 모르기 때문에 SASS로 작성한 파일을 다시 CSS로 컴파일 해야한다. -> node-sass가 알아서 컴파일 해줌

▶사용법 & 편리한 문법

1. 확장자를 example.scss 로 저장
2. 사용할 JS 파일에서 import './ example.scss'

변수

색상,px,% 등등 다 집어넣을 수 있음

$main_color: #ff0050;

.detail_red {
  color: $main_color;
}

import

우리 앱의 메인 CSS파일에 집어넣어도 되긴 함

/*미리 설정된 _reset.scss  /  _default.scss 같은 초기화파일 불러옴*/

@import './_reset.scss'

$main_color: #ff0050;

.detail_red {
  color: $main_color;
}

nesting

CSS 셀렉터를 보기 편하게 개발 가능

div.container {
  h4 {
    color: $main_color;
  }

  p {
    color: green;
  }
}

extend

my_alert가 가지고 있는 속성을 상속, 복붙 대신 비슷한 UI 만들기 용이

.my_alert2 {
  @extend .my_alert; 
  background: blue;
}

.my_alert {
  background: #eeeeee;
  padding: 20px;
  border-radius: 5px;
  p {
    margin: 0 auto;
  }
}

mixin

함수명이 위에 선언되있어야 하고, 파라미터도 넣을 수 있다.

함수 만들기

.my_alert2 {
  @include alert;
  background: blue;
}

@mixin alert {
  background: #eeeeee;
  padding: 20px;
  border-radius: 5px;
  width: 100%;
  margin: 0 auto;
 
}