사용자 도구

사이트 도구


wiki:sass:sass_import

차이

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

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판
이전 판
wiki:sass:sass_import [2021/07/21 20:12]
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,
줄 59: 줄 59:
 방법은 다음과 같습니다: 파일 맨 위에 ''%%@import%%'' 지시문을 추가하는 것이 일반적입니다;\\  방법은 다음과 같습니다: 파일 맨 위에 ''%%@import%%'' 지시문을 추가하는 것이 일반적입니다;\\ 
 이렇게 하면, 콘텐츠가 전역 범위를 갖게 됩니다.\\ 이렇게 하면, 콘텐츠가 전역 범위를 갖게 됩니다.\\
-====SCSS Syntax (mystyle.scss):====+====SCSS Syntax (standard.scss):====
 <code sass> <code sass>
 @import "reset"; @import "reset";
줄 71: 줄 71:
 \\ \\
 그래서, "standard.css" 파일이 트래스파일이 되면, %%CSS%%는 하기와 같습니다.\\ 그래서, "standard.css" 파일이 트래스파일이 되면, %%CSS%%는 하기와 같습니다.\\
-====CSS output (mystyle.css)====+====CSS output (standard.css)====
 <code sass> <code sass>
 html, body, ul, ol { html, body, ul, ol {
줄 84: 줄 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>
줄 97: 줄 99:
 </code> </code>
 \\ \\
-다음 예제는 %%"_colors.scss"%%라는 이름의 %%partial Sass%% 파일을 보여줍니다.\\ +아래 예제에서 %%"_colors.scss"%%라는 이름의 %%partial Sass%% 파일을 보여줍니다.\\ 
 (이 파일은 %%"colors.css"%%로 즉시 트랜스파일되지 않습니다):\\ (이 파일은 %%"colors.css"%%로 즉시 트랜스파일되지 않습니다):\\
 ====예제==== ====예제====
줄 108: 줄 110:
 \\ \\
 이제 %%partial%% 파일을 임포트하는 경우, 밑줄을 생략하십시오. %%Sass%%는 %%"_colors.scss"%%파일을 가져와야 한다는 것을 이해합니다.\\ 이제 %%partial%% 파일을 임포트하는 경우, 밑줄을 생략하십시오. %%Sass%%는 %%"_colors.scss"%%파일을 가져와야 한다는 것을 이해합니다.\\
-====예제==== + 
-<code sass>+==== Example ==== 
 +<code scss>
 @import "colors"; @import "colors";
  
줄 115: 줄 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.1626865938.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)