SCSS와 styled-components

SCSS

Sass는 자식 요소를 들여쓰기로 구분하는 문법을 지원한다. 이를 통해 구조화한 표기가 가능하다.
SCSS는 중괄호가 없는 Sass에서 CSS의 방식으로 중괄호를 추가한 방식이다. Sass와 마찬가지로 CSS로 컴파일 된다.

Sass는 다음의 기능을 지원한다.

1. Nesting
   자식 요소를 선택할 때에는 2 인덴트를 준다.
   가상 클래스 선택자나 가상 요소 선택할 때에는 부모 요소를 &으로 지정한다.

#navbar {
  width: 80%;
  height: 23px;

  &:hover {
    text-decoration: underline;
  }

  // .myAnchor:visited
  &:visited {
    color: purple;
  }

  ul {
    list-style-type: none;
  }

  li {
    float: left;
    a {
      font-weight: bold;
    }
  }
}

프로퍼티에도 nesting을 사용할 수 있다.

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}

그 밖에 아래와 같은 기능들을 지원한다

변수의 사용
조건문과 반복문
Import
Mixin
Extend/Inheritance

styled-components

CSS in js를 이용하여 컴포넌트를 스타일링 할 수 있다.
yarn add styled-components

1. styled.태그명을 뒤에 템플릿 리터럴을 이용하여 스타일을 씌워준다.
2. 조건부로 css를 추가하기 위해서는 styled-components의 css를 import하여 return css 후 템플릿 리터럴을 반환한다.
3. `yarn add polished를 이용하여 Sass와 같은 유틸 함수를 사용할 수 있다. polished는 유틸 함수를 가지고 있는 styled-components의 라이브러리이다.

import React from "react";
import styled, { css } from "styled-components";
import { darken, lighten } from "polished";

const StyledButton = styled.button`
  /* 공통 스타일 */
  display: inline-flex;
  outline: none;
  border: none;
  border-radius: 4px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  padding-left: 1rem;
  padding-right: 1rem;

  /* 크기 */
  height: 2.25rem;
  font-size: 1rem;

  /* 색상 */
  ${(props) => {
    const selected = props.theme.palette.blue;
    return css`
      background: ${selected};
      &:hover {
        background: ${lighten(0.1, selected)};
      }
      &:active {
        background: ${darken(0.1, selected)};
      }
    `;
  }}

  /* 기타 */
  & + & {
    margin-left: 1rem;
  }
`;

function Button({ children, ...rest }) {
  return <StyledButton {...rest}>{children}</StyledButton>;
}

export default Button;