sass에 대해

일단 node-sass를 설치하고 세팅해보자. 터미널에

npm install node-sass
//혹은 yarn add node-sass

브라우저는 sass문법을 몰라서 sass로 작성한 파일을 다시 css로 컴파일을 해야한다. 컴파일하는 라이브러리가 node-sass가 된다. 그 다음, Detail.scss라는 파일을 만들고 Detail.js에 import만 잘하면 연결 성공이다.

import './Detail.scss';

 

scss를 쓰는 이유는 다음과 같다.

$메인칼라 : #ff0000; //$변수명 : 넣을값

.red {
    color : $메인칼라;
}

 

이렇게 변수 문법을 사용가능하고,

 

@import 파일경로를 사용할 수 있다. 예를 들면, reset.scss라는 리셋파일을 만들어놓고 제작중인 scss파일에

@import './reset.scss'

이렇게 적어주면 된다.

 

그리고 nesting문법도 있다.

div.container {
	 
    	h4 {
        
        }
        p {
        
        }
    
}

이런 식으로, 안에 셀렉터를 집어넣을 수 있다.

 

그리고, extend문법이 있다.

색상만 다른 UI를 여러개 만들고 싶을때 css를 여러개 만들지 말고 extend를 사용하면 간편하다.

.my-alert {
    background-color: #eeeeee;
    padding: 20px;
    border-radius: 5px;
    max-width: 500px;
    width: 100%;
    margin: auto;
    p {
        margin-bottom: 0px;
    }
}

.my-alert2 {
    @extend .my-alert;
    background-color: #ffe591;
}

이런 식으로, my-alert2에 .my-alert를 다 가져오고 background색깔만 바꿔주면 된다.

 

마지막으로, @mixin, @include가 있다. 함수문법이며 긴 코드를 짧게 축약할 수 있다.

@mixin 함수() {
	background-color: #eeeeee;
    	padding: 20px;
    	border-radius: 5px;
    	max-width: 500px;
    	width: 100%;
    	margin: auto;
    	p {
        	margin-bottom: 0px;
    	}
}

.my-alert {
   @include 함수(); 
}

이렇게 mixin으로 선언하고 include로 사용할 수 있다. 그리고 보통 함수의 위치가 위에 있어야한다.