scss - 상속, 변수 사용법

쓸 때마다 헷갈리는 변수 사용

react 프로젝트시 scss 변수 설정, 자주쓰는 scss 설정을 선언하여 상속해서 사용할 수 있다.

$color: red;
이와 같이 color란 변수에 red를 명시하여 import 한 곳에서 $color란 이름으로 red 값을 사용할 수 있다.

간단한 예시지만 팀 프로젝트시 해당 사이트의 테마컬러나 공용으로 사용할 사항등은 이렇게 변수를 선언하여 사용하면 한 번에 수정이 가능하므로 유용하다는 것 같다.

scss 속성 상속

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

위와 같이 flexCenter 이름으로 자주 쓰는 flex 속성을 정해놓고
import 한 scss 상에서 @extend %flexCenter; 이런식으로 사용이 가능하다.

참고로 @media 와 같이 이미 뭔가를 적용한 곳에선 이런 것은 또 사용할 수 없는 것 같았다.