SASS

SASS

css를 프로그래밍 언어스럽게 작성 가능한 프리프로세서(Preprocessor)
css에서 변수, 연산자, 함수, extend, import 등을 사용할 수 있게 만들어준다.
브라우저가 이러한 문법을 해석하기 위해서는 SASS라는 라이브러리를 사용하여 css 파일로 변환시켜줘야 한다.

---

Dart sass 설치
node-sass는 계속 사용이 가능하지만, 기능추가나 호환성(m1 환경에서 지원❌)이 추가 되지 않으므로 Dart sass를 사용해야 한다고 한다.

$ npm install sass -D # ❌
$ npm install sass # ✅ 'sass'로 이름 변경

$ yarn add dart-sass # ❌
$ yarn add sass # ✅ 'sass'로 이름 변경됨

---

sass 파일 생성
Detail.js에만 종속되는 CSS파일을 만들 때

/* src 폴더 내에 Detail.css 생성, SASS: Detail.scss */
.red {
  color: red;
}

// Detail.js
import './Detail.css'; // './Detail.scss';

SASS문법으로 작성하려면 파일명만 .scss로 바꿔주면 된다.

---

SASS 장점

1. 코드 중복을 줄일 수 있다.
2. 변수를 선언하여 반복작업을 줄여 유지 보수가 쉬워진다.
3. 4가지 자료형을 지원. 숫자(int), 문자열(string), 컬러, 불린(boolean)
4. 불필요한 selector의 과용이 사라진다.
5. selector를 중첩할 수 있다.

---

변수 사용

$변수명: 집어넣을값;

$main-color: #ff0000;

.red {
  color: $main-color;
}

---

파일 불러오기

예전에는 @import를 사용함
여러가지 문제점으로 인해 Dart Sass에서는 @use를 사용한다.

@use '가져올 파일명';

/* test.scss */
@use 'reset';

.exam2 {
  color: reset.$test-color; /* reset.scss에 있는 변수($test-color) 사용 */
}

/* reset.scss */

$test-color: #ff0000; /* 변수 선언 */

body {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #000;
}

ul,
li {
  list-style: none;
}

div {
  box-sizing: border-box;
}

.exam {
  color: $test-color; /* 변수 사용 */
}

---

nesting

selector 대신에 사용할 수 있는 문법

일반 css 스타일

div.container h4 {
  color: blue;
}
div.container p {
  color: red;
}

nesting 문법

div.container {
  h4 {
    color: blue;
  }
  p {
    color: red;
  }
}

셀렉터 해석이 쉽고 관련된 class끼리 모아놔서 관리하기 편해진다.

---

extends

CSS 코드 재사용이 좋아지고 비슷한 UI 만들기가 쉬워진다.

@extend .클래스명

/* Test.scss */

.first {
  background: #eeeeee;
  padding: 15px;
  border-radius: 5px;
  max-width: 500px;
  width: 100%;
  margin: auto;
}

.second {
  @extend .first; /* .first에 있는 css가 적용됨 */
  background: green;
}

.first h1 {
  font-weight: 900;
}

import React from 'react';
import './Test.scss';

const Test = () => {
  return (
    <>
      <div className='first'>
        <h1>SASS Test 1</h1>
      </div>
      <div className='second'>
        <h1>SASS Test 2</h1>
      </div>
    </>
  );
};

export default Test;

---

@misin / @include

@mixin은 css에서 함수를 사용할 수 있는 문법

@mixin 함수명 으로 함수를 만들고,
@include 함수명() 으로 함수를 사용할 수 있다.

@mixin test() {
  background: #eeeeee;
  padding: 15px;
  border-radius: 5px;
  max-width: 500px;
  width: 100%;
  margin: auto;
}

.first {
  @include test();
}

.first h1 {
  font-weight: 900;
}

함수명이 위에 선언되어 있어야 밑에서 사용 가능하다.