목차
Sass Tutorial
- description : Sass Variables
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-04-08
Ref
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파일로 변환
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파일
<!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>
Sass Variable Scope
Sass 변수는 정의된 네스팅 단계에서만 사용할 수 있습니다.
$myColor: red; h1 { $myColor: green; color: $myColor; } p { color: $myColor }
<p> 태그 안의 텍스트 색상이 빨간색 일까요 녹색일까요? 빨간색입니다!
다른 컬러 정의 $ myColor: green;는 <h1> 규칙 내에 있으며 그곳에서만 사용할 수 있습니다!
따라서 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; }
이제 <p> 태그 안의 텍스트 색상이 녹색이 됩니다!
따라서, CSS 출력은 아래와 같습니다.
CSS Output
h1 { color: green; } p { color: green; }
Tip:
전역 변수(Global Variables)는 규칙 외부에서 정의해야 합니다.
"_globals.scss"라는 이름의 자체 파일에서, 모든 전역 변수를 정의하고
@include 키워드로 파일을 포함하는 것이 현명할 수 있습니다.
