Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- 쉘스크립트
- 시퀄라이즈
- 리액트를 다루는 기술
- npm
- 솔리디티
- wget
- 노드
- 설치
- 라우터
- 리눅스
- centos
- node.js 교과서 따라하기
- Sequelize
- 우분투
- 일반유저
- 리액트
- 전역설치
- 머클루트
- 블록체인
- 머클트리
- immer
- 벨로포터
- 깃허브
- wsl
- 자바스크립트
- Docker
- 환경변수
- MariaDB
- 변수
- 이더리움
Archives
- Today
- Total
코드코코
[리액트] 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
'기록 > 정리' 카테고리의 다른 글
[리액트] styled-components (0) | 2021.10.26 |
---|---|
[리액트] CSS module (0) | 2021.10.26 |
[리액트] import * as React from 'react'; (0) | 2021.10.25 |
[리액트] Immer (0) | 2021.10.25 |
[리액트] Context API (0) | 2021.10.24 |