Sass

🎁 yarn add node-sass sass loader를 설치해주어야 Sass를 사용이 가능하다.
🧨주의 : Error: Node Sass version 5.0.0 is incompatible with ^4.0.0. 이러한 오류가 발생하면 Node Sass의 버전이 맞지 않다는 것.

• npm uninstall node-sass
• npm install node-sass@4.14.1 를 사용하여 해결해줌.
• 뭘해도 안되면 nodejs를 지웠다가 LTS버전으로 다시 설치하는 것을 추천
  필자는 그렇게 해결. 3시간 삽질..

🎈 Sass 사용

🎁 현재 선택자 참조

특정 클래스에 마우스를 올릴 때나 클릭할 때 다른 스타일 적용하는 CSS 코드.

.box:active{
	background:red;
.box:active{
	background:yellow;

⬇

Sass의 현재 선택자 참조 기능으로 작성.

.box{
	&:hover{
    	background: red;
        }
        &:active{
        background:yellow;
        }
     }     

App.js render메서드

render(){
  const isBlue=true;
  return(
    <div className={cx('box', {
    blue:isBlue
    })}>
    <div className={cx('box-inside')}/>
    </div>
  );
}

🎁 변수 사용

Sass는 자주 사용하는 값을 변수에 넣을 수 있다.

$size: 100px;
.box{
display : inline-block;
width : $size;
height: $size;
}

🎁 믹스인 사용

자주 사용하는 값 -> 변수
자주 사용하는 구문 -> 믹스인

$size : 100px;

@mixin place-at-center(){
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.box{
display : inline-block;
width: $size;
height : &size;

@include place-at-center();
}

🧨 변수와 믹스인 전역적으로 사용하는 방법

😜 위에서 배운 변수와 믹스인은 여러 곳에서 사용해야 하기 때문에 스타일 디렉토리를 만들어 전역적으로 사용하는 코드를 따로 분리.

src/styles/utils.scss

$size : 100px;

@mixin place-at-center(){
top:50%;
left:50%;
transform: translate(-50%,-50%);
}

App.scss

@import './styles/utils';

🎈 Sass 라이브러리

😜 Sass 장점 중 하나는 스타일 관련 라이브러리를 쉽게 불러와 사용할 수 있다는 점.
사용하기 위해서는 밑의 라이브러리 설치
npm or yarn으로 설치한 패키지 내부의 파일을 불러올 때는 ~문자를 사용해서 node_modules에 접근 가능.

• yarn add include-media open-color

참고 : <리액트를 다루는 기술>