뭐...
다양한 CSS 처리 방법은 예전부터 알고 있었다.
근데 이제 혼자 제작을 많이 하다보니 CSS로만으로도 충분해서 깊게 들어가지 않았었다.

문제는 처음으로 큰 프로젝트의 형태 (물론 내 입장에서. 이정도 크기는 작은 크기라고 하더라..엉엉😭)에서는 CSS를 쓰기에 한계가 느껴졌고, CSS를 처리하는 다양한 방법을 알아야 하는 순간이 왔다.

styled-components

프로젝트가 커질수록 컴포넌트의 숫자는 늘어난다.
그러면 어마어마한 className에 치이거나, 중복으로 선언하는 일이 생겨버린다. 이럴 때 쓰기 좋은 게 sytled-components 이다.

npm install styled-components

일단 패키지를 설치합시다.

그리고 쓰고자 하는 곳에 이걸 추가해준다.

import { styled } from 'syled-components';

다음에 import 아래, function 위에 원하는 스타일을 만들어주고,

const box = styled.div `
	padding : 20px;
	margin : 10px;
`

return 안에 써야하는 곳에 넣는다.
이러면 굳이 className 을 쓰지 않아도 괜찮다.

return (
  <div className = "containor">
    <box> 컨텐츠 내용! <box>
  </div>
)

비슷한 스타일인데 한두개의 형식만 다를 경우
React의 props를 쓰듯 이것도 그렇게 쓸 수 있다.

const box = styled.div `
	padding : 20px;
	margin : 10px;
	color : ${ props => props.changeColor }
`

//중략

return (
  <div className = "containor">
    <box> 컨텐츠 내용! <box>
    //변수명 = {'하고 싶은 스타일'}
    //또는 changeColor = "red"
    <box changeColor = {'red'}> 또 다른 컨텐츠 내용! <box>
  </div>
)

이 개념을 처음 보았을 때 Vue의 style scope 개념과 비슷해 보였다. 다른게 있다면 이 패키지는 스타일을 컴포넌트로 만들어서 쓴다는 거.

SASS

npm install node-sass

SASS는 CSS를 프로그래밍 언어처럼 작성하게 만든 전처리기(preprocessor)다.
CSS에서 변수, 연산자, 함수, extend, import 사용이 가능하다.

브라우저는 SASS를 문법을 모르기 때문에 CSS로 다시 컴파일 해줘야 하는데 node-sass 라이브러리가 컴파일을 도와준다.

+추가 node-sass가 Ruby로 처리가 되는거라 관짝으로 간 거 같다. SASS 홈페이지에도 관짝 이모티콘이 있던데 지원 중단이 되어서 dart-sass를 쓰라는 경고문이 있었다.

일단 강의를 따라가보려다가 M1 맥북에서는 컴파일이 제대로 되지 않는다는 글을 발견했다. 회사도 개인 노트북도 M1을 써서 이 글을 참고해서 수정하였다.
프로젝트가 굉장히 크다면 gulp 나 webpack 을 통해 관리하는 거 같다.

https://im-designloper.tistory.com/51

SASS 문법을 접해보자!

1. 매우 간단한 문법. CSS 였다면 root에 선언해서 쓰는 곳에 var(--main) 썼던걸 아래와 같이 쓸 수 있다.

$main : #fff;

.container {
  color : $main;
}

2. @import 를 이용하여 파일을 불러올 수 있다. (reset.scss 같은 거라던가..) -> 근데 이제 dart-sass에서는 @use를 쓴다.

@import는 2022년 10월에 중단이라니 변경되는 점 생각하고 쓰자.

@use와 @import의 차이점이라면

• @use를 쓰면 프로젝트에서 몇 번이나 가져왔는지에 상관없이 한 번만 가져온다.

• 밑줄(_) 또는 하이픈(-)으로 시작하는 변수, 믹스인 및 함수(Sass가 "멤버"라고 부름)는 비공개로 간주되며 가져오지 않는다.

• 마찬가지로 @extend 체인에만 적용된다. 가져온 파일에서 선택기를 확장하지만 이 파일을 가져오는 파일은 확장하지 않는다.

• 가져온 모든 멤버는 기본적으로 네임스페이스가 지정된다.

참고 : https://stackoverflow.com/questions/62757419/whats-the-difference-between-import-and-use-scss-rules

https://blueshw.github.io/2019/10/27/scss-module-system/

3.nesting : 셀렉터 대신에 쓴다.

.container {
  h4 {
    color : blue;
  }
}

4. 비슷한 UI에 조금 다른 디자인인 게 필요하다면? @extend

SASS를 배우기 전에는 비슷한 디자인이 나오면 같은 클래스를 부여하고 다른 클래스를 준 다음 추가하는 방법으로 CSS를 입혔다. SASS 는 이렇게 하면 된다.

.my-button {
  background: #333;
  padding: 15px;
  border-radius: 4px;
  width: 100%
  margin: auto;
}

.my-button-red {
  @extend .my-alert; /*이게 SASS의 복사 붙여넣기*/
  backbround: #ffe591; /*형식은 똑같고 원하는 부분만 다르게 지정해주면 된다*/
}

5. @mixin @include

JS에서 함수를 선언하고 쓰는 것처럼 사용이 가능하다.

/*함수는 꼭 윗쪽에 써준다*/
@mixin mixInFuntion() {
  background: #333;
  padding: 15px;
  border-radius: 4px;
  width: 100%
  margin: auto;
}

.my-button {
  @include mixInFuntion()
  /*함수를 가져다 쓸 때 꼭꼭 앞에 @include를 써줘야 한다.*/
}