설치

npm install sass

맥 기준 터미널에서 설치

SASS vs SCSS

요즘은 SASS보다 SCSS를 주로 많이 쓴다고 들었지만, 비교를 해보기로 한다.

SASS vs SCSS 비교

중첩(기본 사용법)

<div className="complete">
	<dl>
		<dt>
			<em>제목</em>
			<p>내용</p>
		</dt>
	</dl>
</div>

.complete {
	dt {
	  margin-bottom: -10px;

		  em {
	      display: block;
	      margin: 15px 0 10px;
	      font-style: normal;
	      font-family: 'Spoqa Han Sans Bold', sans-serif;
	      font-size: 18px;
	      letter-spacing: -0.6px;
	      }
	
	    p {
	      letter-spacing: -0.6px;
	       font-size: 17px;
	     }
	}

}

// 상속하여 사용이 가능

변수 선언

// 원하는 내용을 아래와 같이 전역 변수 선언
$bold: 'Spoqa Han Sans Bold';

// 키값 안에 변수 선언
p {
	$regular: 'Spoqa Han Sans Regular';
	font-size: 24px;
  font-family: $bold, sans-serif;
  letter-spacing: -0.3px;
}

// p 태그 안에 선언하게 되면 지역 변수 선언

부모 참조

<div className="detail-product">
    <p className="detail-product__strapline">subTitle</p>
    <h2 className="detail-product__title">Title</h2>
</div>