리액트 sass
-
리액트 기초이론 5 - 컴포넌트 스타일링 2 - SASS 해답프론트엔드/React 연습과제 해답 2022. 3. 2. 13:15
* 연습과제 1 import React from 'react' import './Button.scss' function Button({ children, size, color, width, handleClick, disabled }){ return {children} } export default Button; Button.defaultProps = { size: 'medium', color: 'tomato', disabled: false } @use "sass:list"; $colors: blue, tomato, grey; $hover-colors: skyblue, lightsalmon, lightgray; $sizes: large, medium, small; $default-height: 50px; ..
-
리액트 기초이론 5 - 컴포넌트 스타일링 2 - SASS프론트엔드/React 2022. 2. 28. 14:55
https://sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com npm 설치없이 sass 파일을 컴파일하려면 비주얼 스튜디오 편집기에서 위의 확장프로그램을 설치하면 된다. index.html 파일을 위와 같이 작성한다. 그리고 style.scss 파일을 생성하고 링크를 걸어준다. 이때 주의할점은 html 문서에서 링크를 연결할때는 style.css 로 작성하는 것이다. 그런 다음 비주얼 편집기 우측 하단의 Watch Sass 버튼을 클릭하면 style..