css를 더 편리하게 사용할 수 있는 css 전처리기(preprocessor) 중 하나인 scss에 대해서 학습해보자.
💡 웹브라우저는 css 만 읽을 수 있으므로 sass, scss 쓰려면 css 전처리기가 필요하다.
sass의 버전 3에서 새롭게 등장한 scss는 css와 거의 동일한 형식의 문법을 사용한다. css에 비해 scss 가 가진 장점은 무엇일까?
⬇️ main, sub 등의 변수로 스타일 값을 지정해서 변동이 생기면 변수만 바꿔주면 된다.
test.scss
Test.js
App.js 에 import 해주고 npm start로 브라우저 확인
💡 css 에서도 변수 처리가 가능하긴하지만, 불편하다.
⬇️ 클래스 box3 요소 안에 h3, p 태그
Test.js
test.scss
Browser
⭐️ 가상 선택자 중첩으로 쓸 때는 자기자신을 가리키는 & 연산자 필요
@extend .클래스명
(@extend %클래스명 도 가능하지만 리액트에서는 x)
⬇️ box1-2 에 box1의 스타일 상속 받기
test.scss
.box1 {
width: 500px;
height: 200px;
background: $main;
}
Browser
@mixin 이름(prams){
}
⬇️ 버튼 2개를 @mixin 으로 스타일 주고, props로 $color 값 받아오기
Test.js
<button className='btn1'>button1</button>
<button className='btn2'>button2</button>
test.scss
호출
@include 이름();
$font: #fff;
라고 변수 지정한 상태!
Browser
⬇️ box4 라는 공통 클래스와 색상명을 각각 클래스로 받은 div 4개, 이를 감싸는 container 클래스 div 생성
<div className='container'>
<div className='box4 orange'></div>
<div className='box4 violet'></div>
<div className='box4 tomato'></div>
<div className='box4 cornflowerblue'></div>
</div>
⬇️ 사이즈를 변수로 지정하고, 매개변수로 $wh 에 곱해지는 값을 받는 @mixin 만들기 / box4 클래스 내에서 각 색상명 클래스로 스타일 중첩