SCSS규칙

React에서는 컴포넌트간 CSS적용의 중복을 피해 가독성을 높이고, 유지보수를 용이하게 하기 위하여 React만의 CSS문법인 SCSS를 사용한다. SCSS에는 기본규칙인 부모요소와 자식요소간의 관계를 파악하여 적용하는 nesting 기능 외에도 여러가지 기능들이 있다. 실제로 SCSS 사용하면서 빈번하게 사용할 것 같은 기능들을 기억하기 위해 정리해둔다.

참고) SASS 역시 SCSS와 동일한 CSS 전처리기이지만, SCSS가 SASS보다 CSS 구문과의 호환성이 높고 SASS의 모든 기능을 지원하는 상위집합이라고 할 수 있다. 사용법도 조금 다른데 SASS는 유효범위를 들여쓰기로 구분하지만 SCSS는 유효범위를 {}으로 구분한다. (그래서 SCSS가 더 가독성이 좋다고 할 수 있다.)

1️⃣ 주석

SCSS는 줄 바꿈과 상관없이 주석 처리할 구문의 처음과 끝에 각각 /,/ 처리만 해주면된다.

*/SCSS주석
처리, 줄바꿈도 상관없다./*

2️⃣ 중첩

가장 기본적이고 많이 사용하는 기능이다. 상, 하위요소 관계를 고려하여 기존 CSS태그를 nesting방식으로 나열하는 방법이다. 들여쓰기를 통해 CSS가 적용되는 상위요소-하위요소 간의 관계를 바로 알 수 있다.

.feedReply {
   display: flex;
   
   .myFeedReply {
      margin-bottom: 5px;
      
      span:first-child {
         font-weight: 700;
      }
      
      span:last-child {
         color: #9b9b9b;
      }
   }
}

3️⃣ 상위선택자 참조

중첩 안에서 & 키워드는 상위(부모) 선택자를 참조한다.

 .inputInformation {
   font-weight: 700
    
   &.inputID {
     color: red
   }
    
   &. inputPassword{
     color: blud
   }
} 	

4️⃣ 중첩된 속성

font-, margin- 등 동일한 속성값을 가지는 경우 속성값을 1번만 사용하여 처리가 가능하다.

.nameSpace {
  font: {
  	size: 20px;
    weight: 800;
  }
  margin: {
  	top: 10px;
    bottom: 20px;
  }
}

5️⃣ 변수

반복적으로 사용하는 값은 변수로 지정이 가능하다.
변수는 이름앞에 $을 붙여 선언할 수 있다. ⭐️변수는 선언된 블록 {}안에서만 유효하다.

$main-color: #789BBC;
$common-l: 17px;

.space {
  color: $main-color;
  padding-bottom: $common-l
}

이 밖에도 다양한 SCSS기능이 있지만, React를 공부하며 요긴하게 사용할 기능들은 이 정도가 되겠다. SCSS에 대해 더 많은 기능들을 알고 싶다면 다음 사이트들을 참고할 수 있다.

자료 출처 및 참고사이트

• https://sass-lang.com/ (SCSS 공식사이트)
• https://heropy.blog/2018/01/31/sass/
• https://blog.nextinnovation.kr/tech/SCSS(SASS)/