====== Sass Tutorial ====== * description : Sass Variables * author : 오션 * email : shlim@repia.com * lastupdate : 2021-04-08 \\ ====Ref==== [[https://www.w3schools.com/sass/sass_variables.php|Sass Variables]]\\ =====Sass Variables===== 변수는 나중에 재사용할 수 있는 정보를 저장하는 방법입니다.\\ \\ %%Sass%%를 사용하면, 하기와 같은 변수들에 정보를 저장할 수 있습니다.\\ * strings (문자열) * numbers (번호) * colors (색상) * booleans (부울) * lists (목록) * nulls \\ %%Sass%%는 %%$%% 기호와 이름을 사용하여 변수를 선언합니다:\\ \\ Sass 변수 구문 (Variable Syntax):


$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;%%는

규칙 내에 있으며 그곳에서만 사용할 수 있습니다!\\ \\ 따라서 %%CSS%% 출력은 다음과 같습니다. `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}}