wiki:sass:sass_variables

차이

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

차이 보기로 링크

--- wiki:sass:sass_variables [2021/04/08 16:04]
emblim98
+++ wiki:sass:sass_variables [2023/01/13 18:44] (현재)
@@ 줄 79: / 줄 79: @@
 </code>
+=====Sass Variable Scope=====
+%%Sass%% 변수는 정의된 네스팅 단계에서만 사용할 수 있습니다.\\
+<code sass>
+$myColor: red;
+h1 {
+    $myColor: green;
+    color: $myColor;
+}
+p {
+    color: $myColor
+}
+</code>
+\\
+''%%<p>%%'' 태그 안의 텍스트 색상이 빨간색 일까요 녹색일까요? 빨간색입니다!\\
+\\
+다른 컬러 정의 %%$ myColor: green;%%는 <h1> 규칙 내에 있으며 그곳에서만 사용할 수 있습니다!\\
+\\
+따라서 %%CSS%% 출력은 다음과 같습니다.
+<code css>
+h1 {
+  color: green;
+}
+p {
+  color: red;
+}
+</code>
+\\
+이것이 변수 범위(scope)의 기본 동작입니다.\\
+=====Using Sass !global=====
+''%%!global%%'' 스위치를 사용하여, 변수 범위의 기본 동작은 무효화할 수 있습니다.\\
+\\
+''%%!global%%''은 변수가 전역(global)임을 나타내며, 이는 모든 단계에서 액세스 할 수 있음을 의미합니다.\\
+\\
+다음 예제를 확인하세요 (위와 동일하지만 global이 추가되었습니다.)\\
+====SCSS Syntax====
+<code sass>
+$myColor: crimson;
+h1 {
+    $myColor: green !global;
+    color: $myColor;
+}
+p {
+    color: $myColor;
+}
+</code>
+\\
+이제 ''%%<p>%%'' 태그 안의 텍스트 색상이 녹색이 됩니다!\\
+\\
+따라서, %%CSS%% 출력은 아래와 같습니다.\\
+====CSS Output====
+<code css>
+h1 {
+  color: green;
+}
+p {
+  color: green;
+}
+</code>
+\\
+**Tip:**\\
+전역 변수(Global Variables)는 규칙 외부에서 정의해야 합니다.\\
+%%"_globals.scss"%%라는 이름의 자체 파일에서, 모든 전역 변수를 정의하고\\
+ %%@include%% 키워드로 파일을 포함하는 것이 현명할 수 있습니다.\\
+\\
+\\
 {{tag>오션, Sass Variables}}

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