[React 따라하기 #14] React sass

sass 는 css 의 pre-processor 입니다. 

npm 이나 yarn 으로 설치합니다.

cmd 에서 

// yarn 으로 설치
c:\your_project>yarn add node-sass
// 또는 npm 으로 설치
c:\your_project>npm install node-sass

 

확장자는 scss 입니다.

sass_test.scss

$textColor: yellow;
$bgColor: white;

h1 {
  color: $textColor;
}

.someClass {
  color: $textColor;	// 중복되는 value 를 한번에 변경 가능.
  background-color: $bgColor;
}

위에서 보듯이 syntax 는

$variableName: value;

 

이렇게 작성하고 import 는 똑같습니다.

import './sass_test.scss';

 

 

더 알아보기

- scope

sass 에서 선언한 변수는 재정의 할 수 있습니다. 이것도 scope 이 있습니다.

$textColor: blue;

h1 {
  $textColor: green;
  color: $textColor;
}

p {
  color: $textColor;
}

 이렇게 있을 때 

<h1>title</h1>
<p>hello~ bryan</p>

결과는

title
hello~ bryan

이렇게 나옵니다.

h1 의 {} 안에서 변경한 변수는 그 안에서만 적용됩니다.

 

- css 스타일과 비교. (좌우가 같음)

CSS	SCSS
nav ul{   padding: 0;   background-color: black; } nav li{   font-family: Arial; }	nav{   ul{     padding: 0;     background-color: black;   }   li{     font-family: Arial;   } }
font-family: Arial; font-size: 15px; font-weight: bold;	font : {   family: Arial;   size: 15px;   weight: bold; }

 

 

- import 

다를 scss 파일을 포함할 수 있습니다.

def.scss 라는 파일이 있고

body {
  margin:0; 
  padding: 0;
  background-color: black;
}

이 파일을 다른 scss 에서 포함할 때 @import "파일명" 을 사용합니다.

@import "def";

body {
  color: blue;
  font-size: 15px;
}

이 scss 는 다음 css와 같습니다.

body {
  margin:0; 
  padding: 0;
  background-color: black;
}

body {
  color: blue;
  font-size: 15px;
}

 

너무 길어지니까 다음 포스트에서

@mixin , @include , @extend , Inheritance 에 대해서 써보겠습니다.