[React] SCSS 개념 정리

1. SCSS의 변수 사용법

SCSS를 설치하면 변수를 사용할 수 있다. 사용법은 직관적이고 간단하다.

$ 기호를 앞에 적어주고 변수명을 적고, 내가 원하는 값을 적어주면 된다.

/*변수를 작성하는 방법*/

$변수명: 값;

/*실사용 예시*/
$fontcolor: #fff;

body{
color:$fontcolor;
}

같은 값이 여러번 반복될 때 일일이 그 값을 다 적어주는 것이 아니라

변수로 지정하여 변수명을 적어줌으로써 같은 값이 사용되었다는 것을 직관적으로 알 수가 있다는 장점이 있다.

2. SCSS의 중첩규칙 이해

CSS 사용 시에,

어떤 요소 안에 들어있는 자식요소에 접근 할때나 가상 요소 선택자를 사용할 때

일일히 부모 요소 안의 자식 요소를 하나하나 선택해주고, 가상 선택자만 빼서 따로 한번 더 적어주어야 하는 것이 비효율적이라거나 귀찮다고 느껴보신 분들도 있을 것 같다.

코드가 지저분해진다는 느낌이 들기도 하고....?

SCSS는 중첩 규칙을 사용하여 이러한 CSS의 단점을 보완하였다.

ul {
   background-color: #33eede;
   li {
      color: #fff;
      &:hover {
         color: gray;
      }
   }
}

이런 식으로 중첩을 통해서 부모요소 안의 자식요소를 선택해줄 수가 있어서 한눈에 알아보기가 편하고

가상 요소 선택자도 & 기호를 사용하여 참조할 요소 안에 중첩 시켜주면 사용 가능하다.

다만! 너무 중첩을 많이 해주면 오히려 가독성이 떨어지고 문제가 생길 수도 있다고 하니 주의할 것