프로젝트를 초기 설계함에 있어서 전역으로 사용하는 스타일의 경우에 색상, 폰트사이즈 등을 한 곳에 모아 변수로 설정하여 사용하면 편할 것 같아서 SCSS를 이용하여 해보고 있다.
☘️ 변수 정의
- 변수 이름 앞에 $를 넣어서 사용한다.(변수를 지정하거나 사용할 땐 $문자를 사용한다.)
- 반복되는 목적의 속성 값을 하나의 변수에 관리하여 여러 곳에 값을 할당하여 줄 수 있다.
- 변수에서 사용 가능한 값은 문자열, 숫자, 색상, 불리언(true, false), 리스트(Array), null이다.
☘️ 변수 등록
// _variable.scss
// Colors
$color-white: #ffffff !default;
$color-black: #000000 !default;
$color-black-rgb: 0, 0, 0 ;
$color-gray-1: #111111 !default;
$color-gray-2: #232323 !default;
$color-gray-4: #4c4c4c !default;
$color-gray-4-rgb: 76, 76, 76;
$color-gray-7: #767676 !default;
$color-gray-8: #8c8c8c !default;
$color-gray-9: #999999 !default;
$color-gray-a: #aaaaaa !default;
$color-gray-c: #cccccc !default;
$color-gray-d: #dddddd !default;
$color-gray-e: #eeeeee !default;
$color-gray-f: #f6f6f6 !default;
// Sizes
$w-idol-m: 132px;
$w-idol: 140px;
$h-idol: 220px;
$h-nav: 44px;
$h-footer: 32px;
$x-scroll-aid: 52px;
☘️변수 사용
@use "variable" as v;
$font_size: 100px;
a {
background: v.$color-orange;
color: v.$color-black;
width: $font_size;
height: $font_size;
border-radius: $font_size * 0.5;
}@use를 통해 변수들을 선언했던 _colors모듈을 가져와 변수를 사용할 수 있다.- 동일한 변수($font_size)를 참조하여 반복을 줄일 수 있다.
☘️ 변수 스코프
SCSS에서도 js처럼 스코프라는 변수범위가 존재한다.
만약, 변수를 특정 선택자에서 선언했다면, 해당 선택자에서만 접근이 가능하다.
$example-color: #000000; /* 전역변수 */
body {
$example-color: #999999; /* 지역변수 */
background-color: $example-color; <-- 여기서의 background-color는 #999999가 된다.
}
p {
color: $example-color; <-- 여기서의 color는 #000000이 된다.
}☘️ 변수 재할당
$red: #FF0000;
$blue: #0000FF;
$example-color1: $blue;
$example-color2: $red;
.box {
color: $example-color1; <-- #0000FF 색상
background: $example-color2; <-- #FF0000 색상
}값을 할당해놓았던 변수를 새로운 변수에 재할당하는 것도 가능하다.
☘️ 변수 전역할당
$global-example-color: #000000; /* 전역변수 */
body {
$global-example-color: #999999 !global; /* global 플래그를 통해 전역변수화 */
background-color: $global-example-color; <-- 여기서의 background-color는 #999999가 된다.
}
p {
color: $global-example-color; <-- 여기서의 color도 #999999이 된다.
}변수를 !global 이라는 플래그를 통해 스코프를 전역으로 설정할 수 있다.
(🪴 지역변수에 !global 플래그를 사용하면 전역변수로 사용할 수 있는 것 !)
위에서 변수 스코프의 코드를 그대로 가져와서 보면, !global 플래그를 사용해 #999999를 전역변수로 만들어 범위 밖의 선택자인 p태그선택자에서도 #999999를 참조할 수 있도록 해준다.
☘️ 초기값 설정
/* 변수선언 */
$color: null;
$color: green !default;
$font-size: 30px;
$font-size: 20px !default;
.content {
color: $color; //green 출력
font-size: $font-size; //30px 출력
}
!default 플래그를 사용하여 할당되지 않은 변수의 초깃값을 설정해준다.(초기화한다고 생각하면 됨!)
변수와 값을 설정해주었지만, Bootstrap등과 같은 외부 라이브러리와 변수이름이 겹쳐 덮어쓰기가 되거나, 다른 협업하는 개발자의 변수들과 겹치게 되면, 그대로 덮어쓰기가 되기 때문에 !default 플래그를 사용한다.
!default를 붙임으로써 '만약 이 변수명과 다른 라이브러리 혹은 코드의 변수명이 겹치게 되면 이 변수를 버리고, 그 겹친 변수의 값을 따르겠다.' 라는 뜻으로 생각하면 된다.
만약 기존 변수에 'null' 값이 있었고 !default를 선언한다면 !default를 선언한 변수값이 적용 된다.
