React Sass

Sass의 활용

1-1. Nesting

• HTML 구조처럼 관리

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

1-2. 변수

• 오타가 나기 쉬운 속성을 저장함

$primary-color: #333;

body {
  border: 1px solid black;
  color: $primary-color;
}

.inverse {
  background-color: $primary-color;
  color: white;
}

1-3. &선택자

• 스타일을 부여하고, 해당 버튼에 hover 효과도 부여할 때

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

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

1-4. mixin

• 중복되는 스타일 속성이 여러 개가 있을 때 한 번에 묶어서 사용

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

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

1-5. variables.scss

• 만들어둔 변수나 mixin을 다른 스타일 파일에서 사용하고 싶을 때

// src/styles/variables.scss

$primary-color: #333;

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

// src/pages/Login/Login.scss

@import "../../styles/variables.scss" body {
  border: 1px solid black;
  color: $primary-color;
}

.inverse {
  @include flexCenter;
  color: white;
}