#4 보다 편한 스타일 작업을 위해 sass 및 classnames 설치

아직도 css으로 작성하시는 분 없으시겠죠?

(간혹 만난다는 건, 안 비밀)

 

일단 설치!

버전 딱히 상관없다. 최신버전으로 받자!

그래도 제 버전이 궁금하신 분을 위해, 저는 ^1.80.4입니다.

npm i sass

 

혹시 gulp-sass로 작성한 scss를 옮겨왔더니 오류가 나신다고요?

예, 정상입니다.

dart sass로 코드 변경해주셔야 해요.

거지 같고, 참 좋죠?

 

dart sass는 사실 별거 없고, @mixin, $variable가 선언되어 있는 파일을 상단에 @use로 가져와 사용해야 합니다.

@use "../base/variables.scss" as var;
@use "../base/mixins.scss" as *;

.test {
	color: var.$primary;
	@include fontSize(20);
}

 

as ${Name}으로 별도 지정해 주시지 않는다면, ${파일명}.scss에서 파일명이 네이밍 됩니다.

따라서, var.$primary가 아니라 variables.$primary가 되겠죠?

다 귀찮을 경우 *으로 선언해서 기존 gulp-sass처럼 사용하면 되는데, 모두 *으로 선언하면, 나중에 이 변수가 어디에 담겨있는지 알 수 없어 파일을 검색을 해야 하는 불상사가 발생하니, 전 사실 variables.scss에 다 모아놓고, *으로.... 저도 귀찮은 건 마찬가지입니다.

 

리액트 연결은 css와 다르지 않습니다. 컴파일된 css가 아닌 sass를 직접 연결해주시면 됩니다.

import "./scss/test.scss";

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

---

다음은 classnames입니다.

atom에 하나의 클래스를 갖는 녀석보다 욕심쟁이 우후훗이 더 많잖아요?

(술 안 마셨어요, 그냥 현재 플젝이 현타 와서 그래요, 1년 만에 블로그 복귀한 이유도 그 이유입니다)

보다 편하게 작성하기 위해 설치합니다.

제 버전은 ^2.5.1입니다.

npm i classnames

 

사용방법은 귀찮으실 수 있는데, 상단에 import 해주시고, classname에 이 녀석을 불러오는 것입니다.

import classNames from "classnames";

const Button = ({ children, size, color, type }) => {
  return (
    <button className={classNames("Button", size, color, { type })}>
      Button
    </button>
  );
};

export default Button;