wiki:sass:sass_import

차이

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

차이 보기로 링크

--- wiki:sass:sass_import [2021/04/08 20:21]
emblim98 만듦
+++ wiki:sass:sass_import [2023/01/13 18:44] (현재)
@@ 줄 1: / 줄 1: @@
-====== Sass Tutorial ======
+====== Sass @import ======
 <WRAP left notice 80%>
   * description : Sass @import and Partials
@@ 줄 32: / 줄 32: @@
 **Tip:**\\
 파일 확장자를 지정할 필요가 없습니다. %%Sass%%는 자동으로 %%.sass%% 또는 %%.scss%% 파일을 의미한다고 가정합니다.\\
-CSS 파일을 가져올 수도 있습니다. ''%%@import%%'' 지시문은 파일을 임포트하고,\\
+%%CSS%% 파일을 가져올 수도 있습니다. ''%%@import%%'' 지시문은 파일을 임포트하고,\\
-임포트한 파일에서 정의된 모든 변수 또는 믹스인(mixins)을 기본 파일에서 사용할 수 있습니다.\\
+임포트한 파일에서 정의된 모든 변수 또는 믹스인(mixins)을 기본 파일(the main file)에서 사용할 수 있습니다.\\
 \\
 기본 파일에서 필요한 만큼의 파일을 가져올 수 있습니다.\\
@@ 줄 43: / 줄 43: @@
 </code>
 예를 들어 보겠습니다: 아래와 같은 "reset.scss"이라는 reset파일이 있다고 가정해 보겠습니다.\\
-====예제====
+=====예제=====
-SCSS Syntax (reset.scss)\\
+==== SCSS Syntax (reset.scss) ====
 <code sass>
 html,
@@ 줄 55: / 줄 55: @@
 </code>
 \\
-이제 "reset.scss"파일을 "standard.scss"라는 다른 파일로 임포트하려 합니다.\\
+이제 상기의 "reset.scss"파일을 "standard.scss"라는 다른 파일로 임포트하려 합니다.\\
 \\
 방법은 다음과 같습니다: 파일 맨 위에 ''%%@import%%'' 지시문을 추가하는 것이 일반적입니다;\\
@@ 줄 71: / 줄 71: @@
 \\
 그래서, "standard.css" 파일이 트래스파일이 되면, %%CSS%%는 하기와 같습니다.\\
-====CSS output====
+====CSS output (standard.css)====
 <code sass>
 html, body, ul, ol {
@@ 줄 85: / 줄 85: @@
 </code>
+===== Sass Partials =====
+기본으로, %%Sass%%는 모든 %%.scss%% 파일들을 직접 트랜스파일화 합니다.\\
+그러나, 어떤 파일을 임포트하려는 경우, 파일을 직접 트랜스파일화 할 필요는 없습니다.\\
+\\
+%%Sass%%에는 이에 대한 메커니즘이 있습니다. 파일 이름을 밑줄(underscore)로 시작하면\\
+%%Sass%%는 해당 파일을 트랜스파일화 하지 않습니다. 이런 식으로 이름이 지정된 파일을 %%Sass%%에서는 %%partials%%라고 합니다.\\
+\\
+따라서 %%partial Sass%% 파일의 이름은 선행 밑줄(leading underscore)로 지정됩니다.(ex, _globals.scss)\\
+====Sass Partial Syntax====
+<code sass>
+_filename;
+</code>
+\\
+아래 예제에서 %%"_colors.scss"%%라는 이름의 %%partial Sass%% 파일을 보여줍니다.\\
+(이 파일은 %%"colors.css"%%로 즉시 트랜스파일되지 않습니다):\\
+====예제====
+%%"_colors.scss"%%:\\
+<code sass>
+$myPink: #EE82EE;
+$myBlue: #4169E1;
+$myGreen: #8FBC8F;
+</code>
+\\
+이제 %%partial%% 파일을 임포트하는 경우, 밑줄을 생략하십시오. %%Sass%%는 %%"_colors.scss"%%파일을 가져와야 한다는 것을 이해합니다.\\
+==== Example ====
+<code scss>
+@import "colors";
+body {
+  font-family: Helvetica, sans-serif;
+  font-size: 18px;
+  color: $myBlue;
+}
+</code>

/volume1/web/dokuwiki/data/attic/wiki/sass/sass_import.1617880895.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)