CSS와 SCSS 비교

CSS vs SCSS 비교하기

1. SCSS란?

• react-components는 SCSS 문법도 지원한다

What is SCSS ?

from CSS 코드

.name.red {
color: red;
}
.name .blue {
color: blue;
}
.name .green {
color: green;
}
.name .child .yellow {
color: yellow;
}
.name + .name {
color: purple;
}

to SCSS 코드

.name {
  &.red {
    color: red;
  }
  .blue {
    color: blue;
  }
  .green {
    color: green;
  }
  .child {
    .yellow {
      color: yellow;
    }
  }
  + .name {
    color: purple;
  }
}

• SCSS에서는 선택자 중복 회피 가능하다
• SCSS variable 등 여러 추가 기능 가능하다.
• +, & 등 여러 선택자를 사용하여, 중첩 선택자 스타일링 가능하다.