<div id="readability-page-1" class="page"><div><p><img src="https://media.vlpt.us/images/2taesung/post/91297835-4168-4bc9-b403-3aefebf08529/image.png"></p>
<h2 id="sass-설치">sass 설치</h2>
<pre><code>yarn(npm) add node-sass</code></pre>
<h2 id="sass-활용법">sass 활용법</h2>
<h3 id="1-변수에-데이터를-저장해서-쓰자">1. 변수에 데이터를 저장해서 쓰자</h3>
<pre><code>$변수명:변수에넣을값</code></pre>
<h3 id="2-import-파일경로">2. @import 파일경로</h3>
<p>=&gt; @import 를 통해 다른 scss 파일들을 주고받을 수 있다.</p>
<pre><code>@import './reset.scss';</code></pre>
<p>=&gt; 여기서 @import './_reset.scss';</p>
<p>=&gt; '_' 를 쓰면 자동으로 쓸모 없는 파일이다 컴파일 안하겠다고 말하게 된다.</p>
<h3 id="3-nesting">3. nesting</h3>
<pre><code><span>div.container</span> <span>{</span>
	<span>h4</span> <span>{</span>
    	<span>color</span> <span>:</span> blue<span>;</span>
    <span>}</span>
    <span>p</span> <span>{</span>
    	<span>color</span> <span>:</span> green<span>;</span>
    <span>}</span>
<span>}</span></code></pre>
<p>=&gt; h4, p 얘네는 div.container랑 관련 있구나 바로 알 수 있다.</p></div></div>

2taesung.log

Taesung Lee

sass 설치
yarn(npm) add node-sass
sass 활용법
1. 변수에 데이터를 저장해서 쓰자
$변수명:변수에넣을값
2. @import 파일경로
=> @import 를 통해 다른 scss 파일들을 주고받을 수 있다.
@import './reset.scss';
=> 여기서 @import './_reset.scss';
=> '_' 를 쓰면 자동으로 쓸모 없는 파일이다 컴파일 안하겠다고 말하게 된다.
3. nesting
div.container {
    h4 {
        color : blue;
    }
    p {
        color : green;
    }
}
=> h4, p 얘네는 div.container랑 관련 있구나 바로 알 수 있다.

[React] 아니면 CSS대신 SASS를 쓰자 (SASS 문법 10분 총정리)

댓글