CSS를 편하게 사용하게 하기위해 도와주는 친구다.
SCSS는 SASS의 3번쨰 버전에서 추가된 녀석이고, SASS의 모든 기능을 사용할 수 있고 CSS와 호환도 잘된다.
먼저 파일을 위와같이 생성해서 기존 style.css 내용을 복사해서 적용해보자.
App.js 에 임포트해주는것도 잊지말자!
import "./scss_ex.scss";
SCSS 사용을 위한 주요 패키지도 설치해주자! 이걸 설치하지않는경우 오류가 발생할 수 있다.
yarn add node-sass@4.14.1 open-color sass-loader classnames
설치 후 yarn start !
1. SCSS의 주요문법
자세한 내용들은 공식문서를 참고해보고 자주사용되는 내용들만 우선 공부하자
https://sass-lang.com/documentation
Sass: Documentation
Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design wi
sass-lang.com
SassMeister | The Sass Playground!
SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading...
www.sassmeister.com
1. 기본문법은 CSS와 동일하다
div { color : #fff }
2. Nesting이 가능하다.
div 아래 p, img 태그 스타일을 줄떄 각각 다른 div를 작성할 필요없이 축약형으로 작성이 가능하다.
상위 요소 이어쓰기도 가능하다. "&" 로 , 클래스명 등 글자 도 이어쓸 수 있다.
마지막으로, 문자열을 치환할 수 있다. (변수 사용가능)
'내마음대로만들어보자 > React' 카테고리의 다른 글
| 라이프사이클 (0) | 2021.07.12 |
|---|---|
| styled-components (0) | 2021.07.12 |
| 클래스형 컴포넌트 와 함수형 컴포넌트의 차이 (0) | 2021.07.09 |
| 클래스형 Component (0) | 2021.07.06 |
| 함수형 Component (0) | 2021.07.06 |
