[리액트] Sass(Syntactically Awesome Style Sheets)

Sass

- pre-pocessor이다.

pre-processor는 CSS 문서의 양을 효율적으로 처리하고 관리해 주는 통합적인 역할을 수행해주는 것을 의미.

 

//Sass 를 CSS로 변환해주는 역할
yarn add node-sass

 

- 변수 선언가능 : $변수명

- 함수 사용가능 : 함수명()

- 반복이 되는 코드는 재사용 가능 : @mixin기능 

- ...rest props 사용 : 지정한 props 를 제외한 값들을 rest 라는 객체에 모아주고, <button> 태그에 {...rest} 를 해주면, rest 안에 있는 객체안에 있는 값들을 모두 <button> 태그에 설정 해줌.

import React from 'react';
import classNames from 'classnames';
import './Button.scss';

function Button({ children, size, color, outline, fullWidth, ...rest }) {
  return (
    <button
      className={classNames('Button', size, color, { outline, fullWidth })}
      {...rest}
    >
      {children}
    </button>
  );
}

Button.defaultProps = {
  size: 'medium',
  color: 'blue'
};

export default Button;

 

classNames

//classNames : 조건부 스타일링을 할 때 함수의 인자에 문자열, 배열, 객체 등을 전달하여 문자열을 조합 할 수 있다.
yarn add classnames

출처

https://react.vlpt.us/styling/01-sass.html

1. Sass · GitBook