SASS 변수 - SASS 문법 1

SASS 문법(Syntax)

SASS는 프론트엔드 전처리기이기도 하지만

자체의 문법이 있는 프로그래밍 언어입니다.

 

어떤 프로그래밍 언어를 배워도 처음에는

변수와 데이터 타입에 대해서 이야기합니다.

어떤 강사는 이 두가지를 이해할 수 있다면

언어의 절반을 마스터한 것과 같다 -

고 말하는 분도 있는데요. 과장이라기 보다는

그만큼 변수와 데이터가 중요하다는 뜻입니다.

 

CSS 파일에는 무슨 내용이 들어가는가?

결국은 컴퓨터에서는 모든 것이 값입니다.

div 컨테이너를 정의할 때 들어가는 높이,

너비, 칼라, 폰트 사이즈, 마진, 패딩, 보더 등

이 모든 것은 값입니다. 문자열도 있지만

문자열은 인코딩한 정수형의 배열입니다.

 

컴퓨터에서는 모든게 숫자이고

숫자를 다룰려면 변수와 데이터 타입에

대해 이해하고 있어야 합니다.

 

 

이번 포스팅에서는 변수부터 시작하겠습니다.

 

변수(variables)가 뭐냐? - 라고 물어보면

막상 대답을 제대로 하는 사람이 적은데요.

변수 자체가 추상화(abstraction)된 표현이라

그렇습니다. 그 말은 어떤 식으로 생각하건

변수를 잘 사용하면 된다는 말입니다.

 

무슨말이냐? - 변수를 숫자를 저장하는

박스라고 생각하건 노트라고 생각하건

카드라고 생각하건 상관이 없다는 말입니다.

추상화가 되어 있기 때문입니다.

 

변수는 이름과 값으로 구성되어

있습니다. 예를 들어

 

$div-height: 100px;

 

라는 SASS 문장에서 값은 100px 이고

이름은 $div-height 입니다.

 

$div-height는 우리가 100px 라는 값을

가져오고 재사용하기 위해 필요한 이름인데

마음대로 지을 수 있습니다. 실제로는

$div-heihgt는 값을 가지고 있는 메모리에

접근할 수 있는 수단을 가지고 있습니다.

c와 같은 정적인 컴파일 언어에서는

메모리 주소라고 하는데 브라우저에서

동작하는 CSS 파일은 그보다 복잡한 과정을

거치니까 100px라는 value를 꺼내기 위해

필요한 key라고 보면 됩니다.

프로그래밍을 하다 보면 key와 value관계를

자주 볼 수 있습니다. (python의 dictionary,

자바의 map 등) 데이터의 기본 속성입니다.

 

값을 꺼내와서 처리하는게 컴퓨터가

하는 일인데 아무 근거없이 가져올 수

없기 때문에 변수라는 형태를 만들어서

모든 언어에서 사용하고 있는겁니다.

 

조금 어렵게 설명을 했습니다. 변수는

다양한 프로그래밍 언어에서 설명해봤지만

생각보다 어렵습니다. 수많은 설명을 써도

모두가 쉽게 이해할 수 있는 그런 간단한

내용이 잘 나오지는 않는 것 같습니다.

그래서 오랜 경력의 프로그래밍 강사분이

변수와 데이터 타입을 이해하면 그 언어의

절반을 이해한 것과 같다고 말씀하신 것이겠지요.

 

변수란 건 그냥 갖다가 쓰면 될 것 같은데

거기엔 심오한게 있다는 말입니다.

 

그럼 CSS에는 변수가 없나요? - 라는 질문엔

CSS에도 custom property로 변수를

만들 수 있습니다. 하지만 프로그래머들이

사용하기에는 좀 적당하지 않다는 평가입니다.

문법적으로 가독성이나 SASS에 비할바는 아니지요.

 

CSS 변수 사용하기 (사용자 지정 CSS 속성)

 

이제 백문이 불여 일타(한번 쳐보는게 낫다)로

본격적으로 SCSS 파일을 만들어서

변수를 사용해보겠습니다.

SASS의 설치에 대해서는 아래 링크를 참고합니다.

 

SASS 시작하기 / SASS 설치 방법 - CSS 전처리기

SASS 시작하기 / SASS 설치 방법 - CSS 전처리기

 

scss 파일을 만들어서 html 의 container

클래스에 연결합니다.

 

sass 커맨드는 sass --watch 파일.scss 파일.css입니다

 

$my-font-size: 1.2em;

.container {
    font-size: $my-font-size;
}

 

변수 이름 앞에 $를 붙입니다.

다른 CSS 선택자와 구분이 됩니다.

$my-font-size는 1.2em으로

변경된다는 것을 알 수 있습니다.

 

CSS에는 .container가 1개건 100개건

모두 1.2em을 입력해줬습니다.

CSS변수를 사용해도 할 수 있지만

선언이나 사용이나 $ 달러사인 하나로

해결되는게 더 사용이 편리하고

가독성이 좋습니다.

(CSS변수는 막상 사용해 보면 코드가

상당히 복잡해집니다.)

 

$my-font-size 에서 - 대쉬를 _ 언더스코어로

바꿀 수도 있습니다. SASS 문법에서 - _ 는

의도적으로 같게 만들어졌습니다.

선언부를 _로 쓰고 사용할 때는 - 로

하는 스타일도 가능합니다.

 

$my-font-size나 $my_font_size는

둘은 같은 겁니다.

데이터 타입

변수에는 데이터 타입이 있습니다.

우리가 변수를 선언할 때 타입은

신경을 안쓰는 언어를 동적 타이핑

(dynamic typing) 이라고 합니다.

정확히는 컴파일러나 인터프리터가

추론(infer)하는 작업을 뒤에서 하는거지요.

 

그렇다고 인터프리터의 마음대로

정해지는 것은 또 아닙니다.

초기화할 때의 입력 값을 근거로

그 변수의 데이터 형이 정해집니다.

 

Sass도 그런 방식입니다.

 

데이터 타입은 종류가 꽤 있어서

다음 포스팅에서 알아보겠습니다.