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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== Sass @import ======
<WRAP left notice 80%>
  * description : Sass @import and Partials
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-08
</WRAP>
<WRAP clear></WRAP>
\\
====Ref====
[[https://www.w3schools.com/sass/sass_import.php|Sass @import and Partials]]\\

=====Sass Nested Rules=====
%%Sass%%는 %%CSS%% 코드를 DRY(Don't Repeat Yourself, 중복배제) 상태로 유지합니다.\\ 
DRY(중복배제) 코드를 작성하는 한 가지 방법은 관련 코드를 별도의 파일에 보관하는 것입니다.\\
\\
%%CSS%% 스니펫으로 작은 파일을 만들어, 다른 Sass 파일에 포함할 수 있습니다.\\
이런 파일에는 reset file, 변수, 색상, 글꼴, 글꼴 크기 등이 있습니다.\\

=====Sass Importing Files=====
%%CSS%%와 마찬가지로 Sass는 ''%%@import%%'' 지시문(directive)도 지원합니다.\\
\\
''%%@import%%'' 지시문을 사용하면 한 파일의 내용을 다른 파일에 포함할 수 있습니다.\\
\\
%%CSS ''@import''%% 지시문은 성능 문제로 인해 큰 단점이 있습니다; 호출할 때 마다 추가 HTTP 요청을 생성합니다.\\ 
그러나 %%Sass ''@import''%% 지시문은 CSS에 파일을 포함합니다; 따라서 런타임에 추가 HTTP 호출이 필요하지 않습니다!\\
====Sass Import Syntax====
<code sass>
@import filename;
</code>
\\
**Tip:**\\
파일 확장자를 지정할 필요가 없습니다. %%Sass%%는 자동으로 %%.sass%% 또는 %%.scss%% 파일을 의미한다고 가정합니다.\\ 
%%CSS%% 파일을 가져올 수도 있습니다. ''%%@import%%'' 지시문은 파일을 임포트하고,\\ 
임포트한 파일에서 정의된 모든 변수 또는 믹스인(mixins)을 기본 파일(the main file)에서 사용할 수 있습니다.\\
\\
기본 파일에서 필요한 만큼의 파일을 가져올 수 있습니다.\\
====예제====
<code sass>
@import "variables";
@import "colors";
@import "reset";
</code>
예를 들어 보겠습니다: 아래와 같은 "reset.scss"이라는 reset파일이 있다고 가정해 보겠습니다.\\
=====예제=====
==== SCSS Syntax (reset.scss) ====
<code sass>
html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}
</code>
\\
이제 상기의 "reset.scss"파일을 "standard.scss"라는 다른 파일로 임포트하려 합니다.\\
\\
방법은 다음과 같습니다: 파일 맨 위에 ''%%@import%%'' 지시문을 추가하는 것이 일반적입니다;\\ 
이렇게 하면, 콘텐츠가 전역 범위를 갖게 됩니다.\\
====SCSS Syntax (standard.scss):====
<code sass>
@import "reset";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}
</code>
\\
그래서, "standard.css" 파일이 트래스파일이 되면, %%CSS%%는 하기와 같습니다.\\
====CSS output (standard.css)====
<code sass>
html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}
</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>





{{tag>오션, Sass @import and Partials}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
