React JS에서 Sass를 사용하여 CSS에서 변수 구현

소개

React는 현재 가장 인기 있는 JavaScript 프레임워크입니다. Wappalyzer에 따르면 React는 JavaScript 프레임워크 기술 중에서 34.1%의 시장 점유율을 가지고 있습니다. 쉬운 학습 경로가 있으며 JavaScript 이후에 배울 수 있습니다.

Sass CSS 확장 기능이 더 강력해졌습니다. Sass를 사용하면 변수, 함수, 중첩 및 기타 멋진 기능을 구현할 수 있습니다.

이것은 "Awesome stylesheet with Sass"시리즈의 첫 번째 파트입니다. 다크/라이트 테마, 로딩 스켈레톤 및 기타 Sass 사용과 같은 파이프라인에 다른 많은 게시물이 있습니다. Twitter( )에서 저를 팔로우하면 향후 게시물에 대한 알림을 더 일찍 받을 수 있습니다.

ReactJS에 Sass 변수를 설치하고 사용하여 이 두 기술을 병합할 것입니다.

시작하겠습니다.

환경 설정

전제 조건

NodeJS를 미리 설치해야 합니다. NodeJS는 런타임 JavaScript입니다. 이는 React 및 Sass를 설치하는 명령을 실행하는 데 도움이 됩니다.

여기에서 NodeJS를 다운로드하십시오: https://nodejs.org/en/download/

반응 설치

컴퓨터에 Nodejs를 설치한 후 이제 React를 설치할 수 있습니다. 아래 명령을 실행하여 React를 설치합니다.

명령:

npm create-react-app react-sass

react-sass는 프로젝트 이름입니다. 다운로드 후 불필요한 파일과 코드를 모두 삭제하십시오.

Sass 설치

이제 우리 프로젝트의 슈퍼히어로인 Sass를 설치할 차례입니다. react-sass 디렉토리에 있는지 확인하고 아래 명령을 실행합니다.

명령:

npm install sass

성공적으로 설치한 후 sass의 종속성 속성에서 package.json를 볼 수 있습니다.

Sass 변수 사용

이름이 style.scss 인 스타일시트 파일을 만듭니다. SCSS는 Syntactically Awesome Style Sheet의 약자로 CSS의 상위 집합입니다. Sass는 구현을 위해 이 파일 확장자를 사용합니다.

변수 선언의 경우 변수 이름 앞에 $를 붙인 다음 변수 이름을 붙이기만 하면 됩니다.

$primary-color: #2C372A

이름이 $primary-color인 파일의 아무 곳에서나 이 변수를 사용하십시오.

함께 보면 다음과 같습니다.

$primary-color:#33D199;

.App {
  font-family: sans-serif;
  text-align: center;
  background-color: $primary-color;
}

구성요소에서 파일을 가져와서 이 스타일시트를 사용하십시오. 가져오기 명령으로 이 작업을 수행할 수 있습니다.

import "./style.scss";

데모

다음 코드샌드박스에서 프로젝트의 라이브 작업을 볼 수 있습니다.

나와 연결

결론

이 기사가 React 애플리케이션 설치 가이드와 함께 Sass와 그 기능을 이해하는 데 도움이 되었기를 바랍니다. 향후 업데이트를 더 일찍 보려면 Twitter( )에서 저를 팔로우하세요.

블로그 게시물을 읽어 주셔서 감사합니다.