사용자 도구

사이트 도구


wiki:sass:sass_variables

문서의 이전 판입니다!


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으로 mystyle.scss를 변환한 결과물인 mystyle.css

body{font-family:Helvetiva,sans-serif;font-size:18px;color:red}#container{width:680px}

====

/volume1/web/dokuwiki/data/attic/wiki/sass/sass_variables.1617862228.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)