반응형 react scss2 [React 따라하기 #15] React sass @mixin @mixin 과 @include css 의 프로퍼티들의 묶음이라고 보면될거같습니다. 예를 들어 scss 에서 @mixin tab-text{ color: red; font-size: 20px; font-weight: bold; background-color: gray; } 이렇게 정의하고 사용할 때는 @include 를 사용합니다. .tab_select { @include tab-text; background-color: green; } 이렇게 사용합니다. css로 변환되면 아래와 같이 됩니다. .tab_select { color: red; font-size: 20px; font-weight: bold; background-color: gray; background-color: green; } 중복되는 c.. 2020. 1. 3. [React 따라하기 #14] React sass sass 는 css 의 pre-processor 입니다. npm 이나 yarn 으로 설치합니다. cmd 에서 // yarn 으로 설치 c:\your_project>yarn add node-sass // 또는 npm 으로 설치 c:\your_project>npm install node-sass 확장자는 scss 입니다. sass_test.scss $textColor: yellow; $bgColor: white; h1 { color: $textColor; } .someClass { color: $textColor;// 중복되는 value 를 한번에 변경 가능. background-color: $bgColor; } 위에서 보듯이 syntax 는 $variableName: value; 이렇게 작성하고 impor.. 2020. 1. 3. 이전 1 다음 728x90 반응형