[React] SSAS

SSAS란?

Syntactically Awesome Style Sheet
nesting이 가능한 css 이다.
SSAS의 확장자 명은 .scss이다.

Nesting 기능 적용하기

Sass의 가장 기본적인 기능으로 Nesting 이라는 것이 있다. JSX 최상위 요소의 className을 컴포넌트 이름과 동일하게 설정해주고, .scss 파일에서도 최상위 요소 안 쪽에서 하위 요소의 스타일 속성을 정의하면 된다.

기존의 css

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

nav li {
  display: inline-block;
}

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

Ssas를 적용한 css

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
	li {
	  display: inline-block;
      }
  }

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

변수 활용, &연산자, mixin

변수 활용

달러sign($)을 이용해서 css 내부에서 변수 선언이 가능하다.

$theme-color: blue;

button {
    width: 200px;
    height: 100px;
    background-color: $theme-color;
    &:hover {
    background-color: red;
    cursor: pointer;
    }

&연산자

&연산자는 hover나 focus와 같이 가상클래스를 만들 때 사용한다.
&는 &가 있는 selector와 같은 역할을 한다.

input {
    background-color: $theme-color;
    &:focus {
    background-color: red;
    }

mixin

mixin은 나의 프로젝트에서 재사용하고 싶은 css선언들을 그룹짓게 해줄수 있다.

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

login-container {
  @include flex-center;