Utility Knowhow

[SassㆍSCSS] SASS 문법 3편 - 변수, !global, !default

퍼블리셔 2021. 11. 1. 15:46
반응형

 

 

Sass

Syntactically awesome stylesheets

 

Sass는 CSS의 부족한 부분을 채워주기 위한 CSS 확장 언어로서 강력한 도구입니다.

Sass는 중첩, 변수, 믹스인, 함수 등 여러 강력한 기능들이 있습니다.

그중 오늘은 SassScript인 변수에 대한 문법을 다루어 보겠습니다.

 

 

 

 

 

변수( Variables)

 

SassScript 문법에서 변수 설정은 변수 이름 앞에 항상 $ 기호를 넣어 시작합니다. 

반복되는 목적의 속성 값을 하나의 변수에 관리하여 여러 곳에 값을 할당하여 줄 수 있습니다. 

변수에서 사용 가능한 값은 문자열, 숫자, 색상,  불리언(true, false), 리스트(Array), null 입니다. 

변수를 정의하는 문법은 $변수명 : 값; 의 문법 형태를 가지고 있습니다.

 

SASS '변수' 문법 코드 입니다. 
$url-sprite: '../img/';
$color-red: #ff0000;

 

 

 

 

 

변수의 유효 범위( Variables Scope)

 

자바스크립트에서도 그렇듯이 SassScript 변수도 범위를 가지며, 전역 변수와 지역 변수 두 개로 나누어집니다.

그리고 변수에 변수를 할당, !default(변수값 초기화 설정), #{  }(문자 보간)을 이용하여 코드 어디서든 변수를 쓸 수 있습니다.

 

 

전역 변수

문서의 최상위에서 바로 작성한 변수를 전역 변수라고 부릅니다.

어떠한 규칙에도 포함되지 않으며, 문서 어디서나 사용 가능합니다. 

 

SASS '전역 변수' 문법 코드 입니다. 
$url-sprite: '../img/'; //전역 변수
$color-red: #ff0000; //전역 변수
$width: 50%; //전역 변수

div {
    background: url($url-sprite + 'sp_icon.png') no-repeat 0 0;
    color: $color-red;
}

p {
    width: $width;
}

 

CSS '전역 변수' 컴파일 결과 코드 입니다. 
div {
  background: url("../img/sp_icon.png") no-repeat 0 0;
  color: #ff0000;
}

p {
  width: 50%;
}

 

 

지역 변수

문서의 최상위가 아닌 class 또는 id가 선언된 블록 코드 {  } 내에서만 유효 범위를 가집니다.

지역 변수는 규칙의 중첩 수준에 따라 사용할 수 있는 지역의 범위가 한정됩니다.

지역 변수는 정의한 블록의 상위 부모 블록에서 사용할 수 없습니다.

그러나 지역 변수에 !global 플래그를 사용하면 전역 변수로 사용할 수 있습니다. 

 

SASS '지역 변수, !global' 문법 코드 입니다. 
div {
    $url-sprite: '../img/'; //지역 변수
    $color-red: #ff0000; //지역 변수
    $width: 50% !global; // !global 전역 변수
    background: url($url-sprite + 'sp_icon.png') no-repeat 0 0;
    color: $color-red;
}

p {
    width: $width;
}

 

CSS '지역 변수, !global' 컴파일 결과 코드 입니다. 
div {
  background: url("../img/sp_icon.png") no-repeat 0 0;
  color: #ff0000;
}

p {
  width: 50%;
}

 

 

변수 재 할당

변수에 변수를 할당해줄 수 있습니다.

 

SASS '변수 재 할당' 문법 코드 입니다. 
$width: 100%;
$box-width: $width;

.box-width {
    width: $box-width;
}

 

CSS '변수 재 할당' 컴파일 결과 코드 입니다. 
.box-width {
  width: 100%;
}

 

!default (변수값 초기화 설정)

!default 플래그를 사용하여 할당되지 않은 변수의 초기값을 설정할 수 있습니다.

할당되어 있는 변수의 기존 할당 값을 초기값으로 사용합니다.

 

SASS '변수값 초기화 설정' 문법 코드 입니다. 
$color-base: pink; 

.box {
    $color-base: orange !default;
    color: $color-base;
}

 

CSS '변수값 초기화 설정' 컴파일 결과 코드 입니다. 
.box {
  color: pink;
}

 

 

#{  } (변수 문자 보간)

#{  } 이용하여 어디서든 변수값을 문자열로 넣을 수 있습니다.

 

SASS '변수 문자 보간' 문법 코드 입니다. 
$line-left: left;
$value25: 25;
$value77: 77;

.box-string_v1 {
    border-#{$line-left}: 1px solid #333;   //문자 보간
}

// 숫자값인 변수를 + 연결하면 연산되어 102 값이 나옵니다.
.box-variables {
    width: $value25 + $value77 + px; 
}

// 문자 보간으로 변수를 + 연결하면 문자값인 2577 값이 나옵니다.
.box-string_v2 {
    width: #{$value25} + #{$value77} + px;
}

 

CSS '변수 문자 보간' 컴파일 결과 코드 입니다. 
.box-string_v1 {
  border-left: 1px solid #333;
}

.box-variables {
  width: 102px;
}

.box-string_v2 {
  width: 2577px;
}

 

 

 

 

 

마치며...

 

Sass에서 변수는 반복되는 CSS 코드를 하나의 변수값으로 여러 곳에 할당함으로써 코드 재활용성 측면에서 보았을 때 좋습니다.

믹스인을 사용할 때도 매개변수와 인수를 이용하면 컴포넌트 코드의 확장성 측면에서도 편리하게 사용할 수 있습니다.

그렇기에 이번 포스팅은 SassScript 중 변수라는 주제 하나로 다루어 보았습니다.

그만큼 중요하다고 생각됩니다.

다음 포스팅은 SassScript 조건문과 반복문에 대하여 알아보겠습니다.

스크립트를 알고 계신 분들은 쉽게 이해하시겠지만, 모르시는 입문자 분들을 위하여 쉽게 설명하고자 노력하였습니다.

감사합니다.

 

 

반응형