[SeSAC DT 과정] REACT - SCSS 사용하기

·2022년 3월 10일
1
post-thumbnail

css를 더 편리하게 사용할 수 있는 css 전처리기(preprocessor) 중 하나인 scss에 대해서 학습해보자.

scss? 👀

  • sass의 버전 3에서 새롭게 등장한 scss는 css와 거의 동일한 형식의 문법을 사용한다. css에 비해 scss 가 가진 장점은 무엇일까?


1️⃣ 변수 사용 가능

⬇️ main, sub 등의 변수로 스타일 값을 지정해서 변동이 생기면 변수만 바꿔주면 된다.

  • test.scss

  • Test.js

  • App.js 에 import 해주고 npm start로 브라우저 확인

  • 💡 css 에서도 변수 처리가 가능하긴하지만, 불편하다.


2️⃣ 중첩 (nesting) 가능

  • 구문을 중첩해서 사용이 가능하다.
  • 하위요소, 자식요소 모두 동일하게 사용

⬇️ 클래스 box3 요소 안에 h3, p 태그

  • Test.js

  • test.scss

  • Browser

    ⭐️ 가상 선택자 중첩으로 쓸 때는 자기자신을 가리키는 & 연산자 필요


3️⃣ Extend

  • 스타일 속성 상속 받기가 가능하다.

@extend .클래스명
(@extend %클래스명 도 가능하지만 리액트에서는 x)

⬇️ box1-2 에 box1의 스타일 상속 받기

  • test.scss

    .box1 {
      width: 500px;
      height: 200px;
      background: $main;
    }
  • Browser


4️⃣ @mixin

  • scss에서 함수와 유사한 문법을 사용할 수 있게 해준다.
  • 매개변수를 받아올 수 있다!

    @mixin 이름(prams){

    }

⬇️ 버튼 2개를 @mixin 으로 스타일 주고, props로 $color 값 받아오기

  • Test.js

    <button className='btn1'>button1</button>
    <button className='btn2'>button2</button>
  • test.scss

  • 호출

    @include 이름();

  • $font: #fff; 라고 변수 지정한 상태!

  • Browser

5️⃣ @mixin 과 클래스 중첩

⬇️ box4 라는 공통 클래스와 색상명을 각각 클래스로 받은 div 4개, 이를 감싸는 container 클래스 div 생성

  • Test.js
    <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 클래스 내에서 각 색상명 클래스로 스타일 중첩

  • Test.scss
    ⭐️ box4 내의 하위요소(또는 자식요소)가 아닌 자기자신의 클래스이므로, &.색상명

  • Browser
profile
걸음마 개발 분투기

0개의 댓글