Sass 변수

Sass 변수 – Sass 가이드 2

by

Sass 변수

CSS에서는 :root 의 가상클래스 방식으로 변수를 사용할 수 있습니다. 사용할 수는 있긴 한데 이것을 써보면 뭐가 좀 부자연스럽다는 느낌이 듭니다. (억지로 집어넣은 듯한 느낌) 그걸 써도 되지만 Sass의 변수를 만들어서 관리하는게 더 좋은 옵션이 될 수 있습니다.

여기서 :root의 예시는 하지 않겠습니다. Scss는 css의 superset 이므로 css에서 가능한 코드는 모두 Scss에서도 동작합니다. 그런데 :root를 사용하려면 Sass를 굳이 사용하지 않았겠지요.

Sass의 변수는 앞에 $를 붙여야 하고 값에 대해서는 사용법이 비슷합니다. 아래를 보면 rgb 형식, 16진수 칼라코드도 css처럼 작성합니다. Sass는 Css를 기반으로 만들어진 문법이라 적응하기 편하지요. 사용할 때는 아래 body에 $primary-color 처럼 그냥 변수를 넣습니다. $ 이것만 장 챙기면 됩니다. $가 변수라는 건 Php와 비슷하네요.

$primary-color: rgb(0, 0, 0);
$text-color: #ffefef;


body{
    background: $primary-color;
    color: $text-color;
}

문자열(String)은 ” 따옴표를 쓰면 됩니다. 따옴표를 쓰지 않아도 문자열을 인식합니다만, 명시적인 표현이지요. Css는 이런 사소한 부분에서 벌써 프로그래밍의 기준에서 벗어나 있지요. 그것이 유연성이겠지만 모호함을 생산하는 지점이기도 합니다.

$primary-color: rgb(0, 0, 0);
$text-color: #ffefef;

$font: 'Georgia';
$font-type: 'sans-serif';


body{
    background: $primary-color;
    color: $text-color;
    font-family: $font, $font-type;
}

이것이 css 파일로 컴파일되면 다음과 같습니다.

한가지 언급할 부분은 Css의 변수들은 사용하는 형식이 정해져 있는데 Sass의 변수는 컴파일되면서 그 자체의 텍스트로 컴파일됩니다. 이는 당연한 것이 Css는 원래 변수가 없던 시스템이니까 오래전에 개발된 Sass가 Css의 변수시스템을 연동시키는 것은 프로그래밍 이치에 맞지 않지요. 지금와서 Css에 변수를 쓸 수 있다고 해서 거기에 맞춰 변형시킬 수는 없는 겁니다. 더 많은 문제를 발생시킬지 모르니까요. scss 파일이 css 파일로 컴파일될 때 Css의 변수시스템과는 무관하다 – 는 점은 알아두면 좋습니다.

Data Type

Sass에는 다양한 데이터 타입이 있습니다. 약간 유연성이 있는게 css의 단위인 px 나 #FFFFFF 같은 값들을 사용할 수 있어서 하드한 타입에 익숙하다면 적응에 조금 시간이 걸릴 수도 있습니다. 하지만 데이터 타입은 동적타이핑 언어의 통상적인 아이디어를 크게 벗어나지 않습니다.

// Number
$my-number: 10;

// String
$my-string: 'Hello World';

// Boolean
$my-boolean: true;

// Color
$my-color: #ff0000;

// Null
$my-null: null;

// List
$my-list: (1px, 2px, 3px, 4px, 5px);

// Map
$my-map: (key: value, key2: value2, key3: value3);

Data Type만 잡고 앉아 있어도 별 소용이 없으니까 다음 포스트에서 메인페이지를 만들면서 하나씩 사용해보겠습니다.

Leave a Comment