scss 문법이 sass보다 css랑 비슷해서 사용하기편함.

node-sass설치

yarn add node-sass

변수 설정

$blue: #228be6;

주석

//이렇게 해도 주석이 가능.

색상 밝게/어둡게 가능

괄호 안에&넣고 이어서 작성가능

.button {
	background: $blue;
	cursor: pointer;

	&:hover{
		background: lighten($blue, 10%);
	}

	&:active{
		background: darken($blue, 10%);
	}
}

classnames 라이브러리 설치

클래스를 효율적으로 넣어주기 위해서. (ex button size color outline 등등 조건마다 다르게 클래스넣어주고싶을 때편함!)

yarn add classnames

import React from 'react';
import classNames from 'classnames';

import './Button.css';

function Button({children, size} ) {
	return <button className={classNames('Button', size)}></button>
}

Button.defaultProps = {
	size: 'medium'
};

//props로 받아온 size에 따라 large, medium, small 등등.. 다르게 클래스네임이 들어갈 수 있다.
export default Button;