React - Sass (SCSS)

1. SCSS 소개
2. SCSS 사용환경 구축
3. SCSS 파일 생성/사용

SCSS 소개

 

1.

SCSS : SASS를 CSS와 유사하게 변형한 CSS 전 처리기.

SASS / SCSS / CSS 차이점. (※ SCSS 기준으로 설명)

 

2.

SCSS 파일은 서버에서 실행 후 CSS를 브라우저로 보냄.

 

4.

SCSS 파일에선 변수 및 함수 사용 가능.

 

5.

SCSS 확장자 : .scss

 

SCSS 사용환경 구축

 

create-react-app 사용해 React 개발 시, 

아래 명령어로 SCSS 쉽게 설치/사용 가능.

 

---

 

C:\Users\사용자명>npm install node-sass

 

SCSS 파일 생성/사용

[style.scss 생성]

C:\User\사용자명\hz\src\style.scss

 

$h1_color: red;

h1 {

  color: $h1_color;

}

 

---

[index.js 생성]

C:\User\사용자명\hz\src\index.js

 

import React from 'react';

import ReactDOM from 'react-dom';

import './style.scss';

class Hz extends React.Component {

  render() {

    return (

      <div>

      <h1>홈짱닷컴</h1>

      <p>Homzzang.com</p>

      </div>

    );   

  } 

}

ReactDOM.render(<Hz />, document.getElementById('root'));