Younho9 NotesSass variables
Sass(SCSS) Syntax - 3. 변수
❗️ 해당 글은 패스트캠퍼스 - 프론트엔드 개발 강의에서 HTML & CSS, SASS(SCSS) Part의 박영웅 강사님의 강의자료(Sass(SCSS) 완전 정복!)를 보며 정리한 것입니다.
변수(Variables)
반복적으로 사용되는 값을 변수로 지정할 수 있다.
변수 이름 앞에 항상 $ 를 붙여야 한다.
$변수이름: 속성값;
$변수이름: 속성값;
$color-primary: #e96900;
$url-images: "/assets/images/";
$w: 200px;
.box {
width: $w;
margin-left: $w;
background: $color-primary url($url-images + "bg.jpg");
}
$color-primary: #e96900;
$url-images: "/assets/images/";
$w: 200px;
.box {
width: $w;
margin-left: $w;
background: $color-primary url($url-images + "bg.jpg");
}
컴파일하면
.box {width: 200px;margin-left: 200px;background: #e96900 url("/assets/images/bg.jpg");}
.box {width: 200px;margin-left: 200px;background: #e96900 url("/assets/images/bg.jpg");}
변수 유효범위(Variable Scope)
변수는 유효범위가 있어서 선언된 블록 ( {} ) 내부에서만 사용할 수 있다.
.box1 {
$color: #111;
background: $color;
}
// Error
.box2 {
background: $color;
}
.box1 {
$color: #111;
background: $color;
}
// Error
.box2 {
background: $color;
}
☝️ 변수 $color 가 .box1 의 블록 안에서 설정되었기 때문에 블록 밖인 .box2 에서는 사용할 수 없다.
🔗 중첩 벗어나기 @at-root 참조
변수 재 할당(Variable Reassignment)
변수에 변수를 할당할 수 있다.
$red: #FF0000;
$blue: #0000FF;
$color-primary: $blue;
$color-danger: $red;
.box {
color: $color-primary;
background: $color-danger;
}
$red: #FF0000;
$blue: #0000FF;
$color-primary: $blue;
$color-danger: $red;
.box {
color: $color-primary;
background: $color-danger;
}
☝️ $color-primary 변수에 $blue 변수가 할당되었다.
컴파일하면
.box {color: #0000FF;background: #FF0000;}
.box {color: #0000FF;background: #FF0000;}
전역설정 !global
!global 플래그를 사용하면 특정 블록 내부에 정의된 변수라 하더라도 유효범위를전역으로 설정할 수 있다.
.box1 {
$color: #111 !global;
background: $color;
}
.box2 {
background: $color;
}
.box1 {
$color: #111 !global;
background: $color;
}
.box2 {
background: $color;
}
컴파일하면
.box1 {background: #111;}.box2 {background: #111;}
.box1 {background: #111;}.box2 {background: #111;}
기존의 같은 이름의 변수가 사용되고 있을 경우 값이 덮어져 사용될 수 있다.
$color: #000;
.box1 {
$color: #111 !global;
background: $color;
}
.box2 {
background: $color;
}
.box3 {
$color: #222;
background: $color;
}
$color: #000;
.box1 {
$color: #111 !global;
background: $color;
}
.box2 {
background: $color;
}
.box3 {
$color: #222;
background: $color;
}
컴파일하면
.box1 {background: #111;}.box2 {background: #111;}.box3 {background: #222;}
.box1 {background: #111;}.box2 {background: #111;}.box3 {background: #222;}
초깃값 설정 !default
!default 는 기존에 변수가 할당되어 있으면, 기존 할당 값을 사용하게 하고, 기존에 변수가 할당되어 있지 않으면 초깃값으로 설정한다.
$color-primary: red;
.box {
$color-primary: blue !default;
background: $color-primary;
}
$color-primary: red;
.box {
$color-primary: blue !default;
background: $color-primary;
}
컴파일하면
.box {background: red;}
.box {background: red;}
☝️ $color-primary 가 전역에서 red 로 기존에 할당되어 있기 때문에 .box 블록 내부에서 blue 가 아니라 red 로 컴파일된다.
☝️ ‘변수와 값을 설정하겠지만, 혹시 기존 변수가 있을 경우는 현재 설정하는 변수의 값은 사용하지 않겠다’ 라는 의미✌️ 외부 라이브러리의 경우, 라이브러리를 불러온 사용자가 기존에 설정한 변수와 이름이 같을 경우에 사용자의 설정을 우선해서사용하도록 !default 플래그를 설정해 놓는다.
문자 보간 #{}
#{} 키워드를 사용해 코드의 공간 어디든지 변수 값을 넣을 수 있다.
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
컴파일하면
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");
☝️ unquote() 는 문자에서 따옴표를 제거하는 Sass의 내장 함수.$family 변수의 값을 url 주소 사이에 끼워 넣었다.
Reference
패스트캠퍼스 - 프론트엔드 개발 강의 - HTML & CSS, SASS(SCSS) Part by ParkYoungWoong