React. Part2. ch2. 05. sass 1

○ sass 란?                                         

 - sass는 library가 아닌 language 이다 !

 - sass에서 뭔가 작업을 하면 css로 만들어준다. 결과물이 css

 

https://sass-lang.com/

 

 

○  https://sass-lang.com/guide

 - Modules : .scss 를 또 다른 .scss 안에 import 시켜서, import된 파일 안 $스타일(변수형태)를 가져다가 쓸 수 있다.

 

<기존 CSS>
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}


<SCSS> nav 안에 여러 태그를 한번에 적을 수 있어 가독성 높음
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

 

<Ex.scss>
$font-stack: Helvetica, sans-serif;
$primary-color: red;

// 위에 선언한 스타일들을 $변수 형태로 아래 { } 안에 넣어서
// 확장성, 재사용성, 유지보수성이 높다.
// $변수명 : 스타일 만 바꾸면 아래 모든 { } 에서 스타일이 변경된다. 
.className1 {
  font: 100% $font-stack;
  color: $primary-color;
}


.className2 {
    font: 100% $font-stack;
    color: $primary-color;
  }

<Ex.jsx>
import React from 'react'
import './Ex.scss'

export default function SassEx() {
	return (
		<div>
			<p>SassEx1</p>	
			<p className="className1">SassEx2</p>	
		</div>
	)
}