Sass – Sass 변수

w3.css

Sass 변수

변수는 나중에 다시 사용할 수 있는 정보를 저장하는 방법이다.

Sass를 사용하면 정보를 변수에 저장할 수 있다.

• Strings. 문자열
• Numbers. 숫자
• Colors. 색상
• Booleans. 논리
• Lists. 목록
• Nulls. 비어있음

Sass는 $ 기호 뒤에 이름을 사용하여 변수를 선언한다.

$variablename: value;

공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여주므로 SCSS 문법으로 작성한 Sass를 사용하자.

왜 Sass 를 사용할까?

스타일시트는 점점 더 커지고 복잡해지고 유지 관리하기 어려워지고 있다.
이 때 CSS 전처리기가 도움이 될 수 있다.

Sass를 사용하면 변수, 중첩 규칙, 믹스인, 가져오기, 상속, 내장 함수 등 CSS에 없는 기능을 사용할 수 있다.

예제

myFont, myColor, myFontSize 및 myWidth라는 4개의 변수를 선언하자.

변수를 선언한 후에는 원하는 곳에 변수를 사용할 수 있다.

$myFont: Helvetica, sans-serif;

$myColor: red;

$myFontSize: 18px;

$myWidth: 680px;

body {

font-family: $myFont;

font-size: $myFontSize;

color: $myColor;

}

#container {

width: $myWidth;

}