wiki:sass:sass_variables

차이

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

차이 보기로 링크

--- wiki:sass:sass_variables [2021/04/08 15:10]
emblim98 만듦
+++ wiki:sass:sass_variables [2023/01/13 18:44] (현재)
@@ 줄 49: / 줄 49: @@
 </code>
+====Scout-App으로 scss파일을 css파일로 변환====
+{{:wiki:sass:scout-app.png?400|}}\\
 ====Scout-App으로 mystyle.scss를 변환한 결과물인 mystyle.css====
+따라서, %%Sass%% 파일이 트랜스파일 되면, 변수 (myFont, myColor 등)를 가져 와서 아래와 같이 %%CSS%%에 변수 값이 있는 일반 CSS를 출력합니다.\\
 <code css>
-body{font-family:Helvetiva,sans-serif;font-size:18px;color:red}#container{width:680px}
+body {
+  font-family: Helvetiva, sans-serif;
+  font-size: 18px;
+  color: red;
+}
+#container {
+  width: 680px;
+  border: 2px blue double;
+}
+</code>
+\\
+%%html%%파일
+<code html>
+<!DOCTYPE html>
+<html>
+<link rel="stylesheet" href="mystyle.css">
+<body>
+    <h1>Hello World</h1>
+    <p>This is a paragraph.</p>
+    <div id="container">This is some text inside a container</div>
+</body>
+</html>
 </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.1617862228.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)