차이

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

--- wiki:sass:sass_import [2021/04/08 21:02]
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,
+html, body, ul, ol {
-body,
-ul,
-ol {
   margin: 0;
   padding: 0;
@@ 줄 87: / 줄 84: @@
 }
 </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====
 <code sass>
@@ 줄 100: / 줄 99: @@
 </code>
 \\
-다음 예제는 %%"_colors.scss"%%라는 이름의 %%partial Sass%% 파일을 보여줍니다.\\
+아래 예제에서 %%"_colors.scss"%%라는 이름의 %%partial Sass%% 파일을 보여줍니다.\\
 (이 파일은 %%"colors.css"%%로 즉시 트랜스파일되지 않습니다):\\
 ====예제====
@@ 줄 111: / 줄 110: @@
 \\
 이제 %%partial%% 파일을 임포트하는 경우, 밑줄을 생략하십시오. %%Sass%%는 %%"_colors.scss"%%파일을 가져와야 한다는 것을 이해합니다.\\
-====예제====
-<code sass>
+==== Example ====
+<code scss>
 @import "colors";
@@ 줄 118: / 줄 118: @@
   font-family: Helvetica, sans-serif;
   font-size: 18px;
-  colors: $myBlue;
+  color: $myBlue;
+}
 </code>

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구