SASS

✅ SASS란?

ss문법과 유사하지만 선택자의 nesting이나 조건문, 반복문, 다양한 단위의 연산 등 표준 css 보다 훨씬 많은 기능을 사용하여 편리하게 작성할 수 있다.
단 웹에서는 직접 동작하지 않아 전처리기를 웹에서 동작 가능한 표준 css로 compile해야 한다.

✍️ 주석

css 주석은 /* ... */ 이지만 sass는 /* 컴파일되는 주석 */ 과 //컴파일되지 않는 주석 두 가지 스타일의 주석을 사용한다.
그리고 여러줄 주석을 사용할 때 각 줄 앞에 *을 붙여야하고, 중요한 것은 *의 라인을 맞춰야 한다.

/* 컴파일되는
 * 여러 줄
 * 주석 */

👉 자손결합자

MPA환경에서는 각 페이지마다 css파일을 독립적으로 import해 사용하기 때문에 선택자가 해당 페이지에서만 중복되지 않으면 됐지만, SPA환경에서는 Router.js에 모든 페이지 컴포넌트가 모이고 index.js -> index.html까지 모이는 구조기 때문에 각 css파일에서 겹치는 선택자가 있다면 스타일이 깨질 수 밖에 없다.

className을 모두 다르게 주는 방법도 위와 같은 문제를 해결할 수 있지만 코드가 길어지게 된다면 유지보수를 하는데 비효율적이다. 그래서 자손결합자를 사용하는 방법이 가장 효율적인 해결책이다.

✍️ 중첩규칙(nesting)

sass에서는 선택자를 서로 다른 선언문에서 계속 반복해 쓰지 않고 서로 중첩해 쓸 수 있다. 컴파일 후 결과 파일에는 선택자가 각자 따로 생성되어 반영된다.

🥸 & 선택자

nesting 내부에서 &선택자는 부모 선택자로 치환된다.

// Sass & 선택자 활용 예시

button {
  width: 200px;
  height: 50px;

  &:hover {
    width: 400px;
    height: 100px;
  }
}

✍️ 단축속성

여러가지 css 속성의 값을 함께 지정할 수 있는 속성으로, 같은 주제를 가진 여러 공통 속성을 묶기 위해 정의하는 속성이다. 이를 이용해 단축 속성의 하위 속성을 그룹화 할 수 있다.

🥸 mixin

중복되는 스타일 속성이 있을 때 사용하는 방법이다. 중복되는 스타일 속성이 여러 개가 있을 때 한번에 묶어서 사용하기 좋다

@mixin 변수이름 {여러가지 스타일 속성}

// Sass mixin 활용 예시

@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.info {
  @include flexCenter;
}

그리고 스타일 속성의 틀은 유지한 채, 스타일 속성에 적용되는 값을 변경해 적용해 줄 수 도 있다.

// Sass mixin 인수 활용 예시

@mixin flexSort($justify, $alignItems) {
  display: flex;
  justify-content: $justify;
  align-items: $alignItems;
}

.info {
  @include flexSort('space-between', 'center');
}