$variablename: value;
\\
다음 예제에서는 myFont, myColor, myFontSize 및 myWidth라는 4 개의 변수를 선언합니다.\\
변수를 선언한 후에는 원하는 곳에서 변수를 사용할 수 있습니다.\\
====SCSS Syntax====
$myFont: Helvetiva, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
}
#container {
width: $myWidth;
}
====Scout-App으로 scss파일을 css파일로 변환====
{{:wiki:sass:scout-app.png?400|}}\\
====Scout-App으로 mystyle.scss를 변환한 결과물인 mystyle.css====
따라서, %%Sass%% 파일이 트랜스파일 되면, 변수 (myFont, myColor 등)를 가져 와서 아래와 같이 %%CSS%%에 변수 값이 있는 일반 CSS를 출력합니다.\\
body {
font-family: Helvetiva, sans-serif;
font-size: 18px;
color: red;
}
#container {
width: 680px;
border: 2px blue double;
}
\\
%%html%%파일
Hello World
This is a paragraph.
This is some text inside a container
=====Sass Variable Scope=====
%%Sass%% 변수는 정의된 네스팅 단계에서만 사용할 수 있습니다.\\
$myColor: red;
h1 {
$myColor: green;
color: $myColor;
}
p {
color: $myColor
}
\\
''%%%%'' 태그 안의 텍스트 색상이 빨간색 일까요 녹색일까요? 빨간색입니다!\\ \\ 다른 컬러 정의 %%$ myColor: green;%%는
h1 {
color: green;
}
p {
color: red;
}
\\
이것이 변수 범위(scope)의 기본 동작입니다.\\
=====Using Sass !global=====
''%%!global%%'' 스위치를 사용하여, 변수 범위의 기본 동작은 무효화할 수 있습니다.\\
\\
''%%!global%%''은 변수가 전역(global)임을 나타내며, 이는 모든 단계에서 액세스 할 수 있음을 의미합니다.\\
\\
다음 예제를 확인하세요 (위와 동일하지만 global이 추가되었습니다.)\\
====SCSS Syntax====
$myColor: crimson;
h1 {
$myColor: green !global;
color: $myColor;
}
p {
color: $myColor;
}
\\
이제 ''%%%%'' 태그 안의 텍스트 색상이 녹색이 됩니다!\\
\\
따라서, %%CSS%% 출력은 아래와 같습니다.\\
====CSS Output====
h1 {
color: green;
}
p {
color: green;
}
\\
**Tip:**\\
전역 변수(Global Variables)는 규칙 외부에서 정의해야 합니다.\\
%%"_globals.scss"%%라는 이름의 자체 파일에서, 모든 전역 변수를 정의하고\\
%%@include%% 키워드로 파일을 포함하는 것이 현명할 수 있습니다.\\
\\
\\
{{tag>오션, Sass Variables}}