사용자 도구

사이트 도구


wiki:sass:sass_import

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판
이전 판
wiki:sass:sass_import [2021/07/21 20:03]
emblim98
wiki:sass:sass_import [2023/01/13 18:44] (현재)
줄 43: 줄 43:
 </code> </code>
 예를 들어 보겠습니다: 아래와 같은 "reset.scss"이라는 reset파일이 있다고 가정해 보겠습니다.\\ 예를 들어 보겠습니다: 아래와 같은 "reset.scss"이라는 reset파일이 있다고 가정해 보겠습니다.\\
-====예제==== +=====예제===== 
-SCSS Syntax (reset.scss)\\+==== SCSS Syntax (reset.scss) ====
 <code sass> <code sass>
 html, html,
줄 55: 줄 55:
 </code> </code>
 \\ \\
-이제 "reset.scss"파일을 "standard.scss"라는 다른 파일로 임포트하려 합니다.\\+이제 상기의 "reset.scss"파일을 "standard.scss"라는 다른 파일로 임포트하려 합니다.\\
 \\ \\
 방법은 다음과 같습니다: 파일 맨 위에 ''%%@import%%'' 지시문을 추가하는 것이 일반적입니다;\\  방법은 다음과 같습니다: 파일 맨 위에 ''%%@import%%'' 지시문을 추가하는 것이 일반적입니다;\\ 
줄 71: 줄 71:
 \\ \\
 그래서, "standard.css" 파일이 트래스파일이 되면, %%CSS%%는 하기와 같습니다.\\ 그래서, "standard.css" 파일이 트래스파일이 되면, %%CSS%%는 하기와 같습니다.\\
-====CSS output====+====CSS output (standard.css)====
 <code sass> <code sass>
-html, +html, body, ul, ol {
-body, +
-ul, +
-ol {+
   margin: 0;   margin: 0;
   padding: 0;   padding: 0;
줄 87: 줄 84:
 } }
 </code> </code>
-=====Sass Partials===== + 
-기본으로 %%Sass%%는 모든 %%.scss%% 파일을 직접 트랜스파일합니다.\\  +===== Sass Partials ===== 
-그러나 파일을 임포트하는 경우, 파일을 즉시 트랜스파일할 필요는 없습니다.\\+기본으로%%Sass%%는 모든 %%.scss%% 파일을 직접 트랜스파일화 합니다.\\  
 +그러나, 어떤 파일을 임포트하는 경우, 파일을 직접 트랜스파일화 할 필요는 없습니다.\\
 \\ \\
-%%Sass%%에는 이에 대한 메커니즘이 있습니다파일 이름을 밑줄로 시작하면,\\  +%%Sass%%에는 이에 대한 메커니즘이 있습니다파일 이름을 밑줄(underscore)로 시작하면\\  
-Sass는 그 파일을 트랜스파일하지 않습니다. 이렇게 명명된 파일은 Sass에서 partials라고 합니다.\\+%%Sass%%는 해당 파일을 트랜스파일화 하지 않습니다. 이런 식으로 이름이 지정된 파일을 %%Sass%%에서는 %%partials%%라고 합니다.\\
 \\ \\
-따라서%%partial Sass%% 파일의 이름은 밑줄로 시작됩니다.\\+따라서 %%partial Sass%% 파일의 이름은 선행 밑줄(leading underscore)로 지정됩니다.(ex, _globals.scss)\\ 
 ====Sass Partial Syntax==== ====Sass Partial Syntax====
 <code sass> <code sass>
줄 100: 줄 99:
 </code> </code>
 \\ \\
-다음 예제는 %%"_colors.scss"%%라는 이름의 %%partial Sass%% 파일을 보여줍니다.\\ +아래 예제에서 %%"_colors.scss"%%라는 이름의 %%partial Sass%% 파일을 보여줍니다.\\ 
 (이 파일은 %%"colors.css"%%로 즉시 트랜스파일되지 않습니다):\\ (이 파일은 %%"colors.css"%%로 즉시 트랜스파일되지 않습니다):\\
 ====예제==== ====예제====
줄 111: 줄 110:
 \\ \\
 이제 %%partial%% 파일을 임포트하는 경우, 밑줄을 생략하십시오. %%Sass%%는 %%"_colors.scss"%%파일을 가져와야 한다는 것을 이해합니다.\\ 이제 %%partial%% 파일을 임포트하는 경우, 밑줄을 생략하십시오. %%Sass%%는 %%"_colors.scss"%%파일을 가져와야 한다는 것을 이해합니다.\\
-====예제==== + 
-<code sass>+==== Example ==== 
 +<code scss>
 @import "colors"; @import "colors";
  
줄 118: 줄 118:
   font-family: Helvetica, sans-serif;   font-family: Helvetica, sans-serif;
   font-size: 18px;   font-size: 18px;
-  colors: $myBlue;+  color: $myBlue; 
 +}
 </code> </code>
- 
- 
  
  
/volume1/web/dokuwiki/data/attic/wiki/sass/sass_import.1626865383.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)