문서의 이전 판입니다!

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, Variables

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

목차

Sass Tutorial

Ref

Sass Variables

SCSS Syntax

Scout-App으로 scss파일을 css파일로 변환

Scout-App으로 mystyle.scss를 변환한 결과물인 mystyle.css

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

목차

Sass Tutorial

Ref

Sass Variables

SCSS Syntax

Scout-App으로 scss파일을 css파일로 변환

Scout-App으로 mystyle.scss를 변환한 결과물인 mystyle.css

문서 도구