CSS/SASS (3) 썸네일형 리스트형 SASS를 이용해서 특정 색의 밝기를 비율로 조절하는 방법 .button--lighten { background: lighten(#6b717f, 20%); } .button--darken { background: darken(#6b717f, 20%); } lighten과 darken 함수에 따라서 원래 색이 변환된다. 쓸만한 SASS 기본 기능들 1. 주석 css에서는 // 이 주석을 사용할 수 없지만 sass에서는 가능하다. 2. Nesting 아래처럼 중첩해서 사용할 수 있어 보기도 좋고 코드량도 줄어든다. div { font-size: 20px; div { font-size: 10px; } } 3. 변수 손쉽게 변수를 사용할 수 있다. $login-color: rgb(215, 215, 215); div { background-color: $login-color; } 4. 상위 선택자 .block { &__element { } } 위와 아래는 동일하다. .block { } .block__element { } 5. Import 다른 scss 파일을 가져온다. @import "variables"; // variables.scss 파일의 내용을 가.. 리액트에서 SASS 쓰는 방법 1. 다음을 입력해서 리액트 프로젝트를 만든다. npx create-react-app 폴더이름 2. sass를 설치해야 한다. npm install node-sass 3. 이제 다음과 같은 방법으로 scss 파일을 불러올 수 있다. import './App.scss'; 이전 1 다음
