SASS - 3장 변수(Variable)

수정·2023년 3월 5일

Sass

목록 보기

3/7

변수(Variable)

1. css에서 변수라니?

변수를 선언한다는 것은 값을 일일이 고치지 않아도 된다는 의미입니다. 유지보수를 매우 쉽게 만들어준다는 것이죠.

하지만 무분별하게 CSS를 작성해서는 안됩니다. 충돌할 수도 있기 때문입니다.
타당한 이유가 있는 변수들만 먼저 생성하시고, 다음 변수는 팀의 적절한 논의를 거쳐 생성하도록 하세요.

변수를 사용하는 기준

값이 두 번 이상 반복된다면 미리 변수로 만듭니다. 값을 기억하지 않고 변수명만을 가지고 스타일을 할 수 있습니다.

기존의 값을 다른 값으로 변경해야할 경우, 변수의 값만 변경하면 되기 때문에 값이 수정될 가능성이 있다면 변수 생성을 고려합니다.

보통 타이포그래피, 폰트색상, 폰트사이즈, 글자 간격 등의 값을 변수로 정의해서 사용합니다.

2. 변수 생성하기

변수를 만들 때는 "$" 기호를 사용하셔서 스타일을 적용할 값(색상, 폰트 사이즈, 이미지url)을 저장합니다.

//**$변수 : 값**
$bgColor : #FFF

css 전체에 걸쳐 반복되는 값들을 정의하면 편하게 스타일링을 할 수 있습니다.

//색상
$red: #ee4444;
$black: #222;
$bg-color: #3e5e9e;
$link-color : #red;
$p-color : #282A36;

//폰트사이즈
$font-p : 13px;
$font-h1 : 28px;

//폰트
$base-font : 'Noto Sans KR', sans-serif;

body{
		background-color : $bg-color;
		font-size : $font-p;
		font-family : $base-font;
}

h1{
   font-size : $font-h1;
	 color : $black;
}

p{
	font-size : $font-p;
	color : $black;
}

3. 변수 type

numbers, strings, color, booleans, lists, maps, null 이 있습니다. 아래와 같은 형태로 입력 가능합니다.

numbers : 1, .82, 20px, 2em 등
strings : "./images/a.png", bold, left, uppercase 등

// 아래와 같이 사용할 수 있습니다.
$path : './assets/img/';
$name : 'background.png';
.test {
	background-image: url($path + $name);
}

colors : green, #FFF, rgba(255,0,0,.5) 등
booleans : true, false
null
lists :

//sass 공식문서
$font-size : 10px 12px 16px; //폰트사이즈 리스트
$image-file : photo_01, photo_02, photo_03 //이미지 파일명 리스트
    
//아래와 같은 형태로 사용(순회도 가능)
list.nth(10px 12px 16px, 2); // 12px
list.nth([line1, line2, line3], -1); // line3
    
// 아래와 같이 사용합니다.
.test1 {
	font-size: nth($list: $font-size, $n: 2);
}
    
.test2 {
	font-size: nth($font-size, 2);
}

maps :

//sass 공식문서
$font-weights: ("regular": 400, "medium": 500, "bold": 700); //글자 굵기 리스트
    
//아래와 같은 형태로 사용
map.get($font-weights, "medium"); // 500
map.get($font-weights, "extra-bold"); // null
    
.test1 {
	font-weight: map-get($font-weights, "medium"); // 500
}

4. Lists, Maps

4-1. Lists

리스트는 순서가 있는 값으로, 값마다 인덱스를 가지고 있습니다. lists를 만들려면 lists의 요소들을 쉼표, 나 공백 또는 일관성이 있는 /로 구분하여 생성하고, 다른 타입의 변수들과 다르게 특수 괄호를 사용하지 않아도 lists로 인식합니다. 빈 lists를 만들 때나 lists에 들어있는 값이 하나 인 경우 [ ] 나 ( ) 를 사용하여 생성합니다.

lists에 들어있는 값의 index는 0부터 시작하지 않고 1부터 시작합니다.

$sizes: 40px, 50px, 80px;
$valid-sides: top, bottom, left, right;

lists 관련 내장함수

append(list,value,[separator]), index(list,value), nth(list, n) 등이 있습니다.

append(list,value,[separator]) : lists의 값을 추가하는 함수

index(list,value) : lists의 값에 대한 인덱스를 리턴하는 함수

nth(list, n) : lists의 인덱스에 해당하는 값을 리턴하는 함수

예시

nth()를 사용해서 lists의 인덱스에 해당하는 값을 불러옵니다.

// Scss
$valid-sides: left, center, right;

.screen-box{
	text-align : nth($valid-sides,1);
}

/*CSS*/
.screen-box {
  text-align: left;
}

4-2. Maps

maps는 ( ) 괄호 안에 키:값의 형태로 저장하여 사용합니다. 키와 값을 정의할 때, 키는 고유해야 하지만 키에 해당하는 값은 중복이 가능합니다. 변수를 각각 선언하는 대신, 관련 있는 변수들을 한번에 모아 maps로 만들어서 사용할 수 있습니다.

map관련 내장함수

map-get(map,key), map-keys(map), map-values(map) 등이 있습니다.

map-get(map,key) : 키에 해당하는 값을 값을 리턴하는 함수

map-keys(map) : map에 들어있는 키(key) 전부를 리턴하는 함수

map-values(map) : map에 들어있는 값(value) 전부를 리턴하는 함수

예시

map-get을 사용하여 map안에 있는 키에 해당되는 값을 불러옵니다.

// Scss
$font-sizes: ("h1": 45px, "h2": 19px, "p": 16px);

section {
	h2 {
		font-size : map-get($font-sizes, "h1");// 45px
	}
}
map-get($font-size, "h3");// null

/*CSS*/
section h2 {
	font-size : 45px;
}

※ lists와 maps 뿐만 아니라 string이나 number같은 타입들도 function을 가지고 있습니다. 아래 사이트를 참고하시기 바랍니다.

참고 : Sass String Functions

5. 변수의 Scope(변수의 유효범위)

변수는 전역변수와 지역변수로 두가지 종류가 있습니다.

5-1. 지역변수

지역변수는 선언한 자기자신을 감싸고 있는 중괄호 { } 안에서 사용됩니다.
하위 단계에 있는 중괄호에서도 사용할 수 있습니다.

.info{
	$line-normal : 1.34; // 지역변수
	font-size : 15px;
	line-height : $line-normal;
	text-align : right;
  span{
		line-height : $line-normal;
	}
}

5-2. 전역변수

전역변수는 가장 윗부분에 정의하면 파일 내에 어디서든지 사용가능합니다.

전역변수를 파일로 만들어서 사용하는 경우, 메인 scss파일(파일분할부분에서 설명한 style.scss파일)에서 전역변수파일을 다른 파일들보다 윗부분에 위치시킵니다.

//Scss
$font-p : 15px; // 전역변수

.main-box{
	p {
		font-size : $font-p;
	}
	a {
		font-size : $font-p;
	  color : blue;
		text-decoration : none;
	}
}

!global을 사용하여 local 변수를 global 변수로 만들어 사용할 수도 있습니다.

$mycolor: #ffffff !global;

참고 : Variables

6. Operator

6-1. 비교연산자 (숫자형)

1) < , <=, >, >=

a < b : a의 값이 b보다 값이 작은지 확인합니다.

a <= b : a가 b보다 값이 작거나 같은지 확인합니다.

a > b : a의 값이 b보다 값이 큰지 확인합니다.

a >= b : a가 b보다 값이 크거나 같은지 확인합니다.

// Sass 공식문서
@debug 100 > 50; // true
@debug 10px < 17px; // true
@debug 96px >= 1in; // true
@debug 1000ms <= 1s; // true

⚠️ ERROR : 비교하거나 연산하는 값의 단위가 일치하지 않으면 에러가 발생합니다.
그러나, 단위가 없는 숫자와 일반숫자와 비교하는 경우에는 에러가 발생하지 않습니다.

//Sass 공식문서

@debug 100px > 10s;
// Error: Incompatible units px and s

@debug 100 > 50px; // true
@debug 10px < 17; // true
// Not Error

2) ==, != (모든 타입)

a == b : a가 b와 값이 같은지 확인합니다.

a != b : a가 b와 값이 다른지 확인합니다.

변수의 타입에 따라 true, false결과가 약간씩 다릅니다.( == 의 연산자의 경우를 말합니다. != 연산자는 반대의 값을 반환합니다.)

색상, 숫자, 문자열은 값과 단위가 동일한 경우나, 값의 단위를 서로 변환했을 때 일치하는 경우 true를 반환합니다.
맵은 키와 값이 모두 동일할 때, 리스트는 들어있는 값들이 모두 동일해야만 true를 반환합니다.
boolean의 경우, true == true, false == false,null == null 처럼 각자 자신과 비교할 때만 true를 반환합니다.

//Sass 공식문서

// 숫자
@debug 1px == 1px; // true
@debug 1px != 1em; // true
@debug 1 != 1px; // true
@debug 96px == 1in; // true

// 문자
@debug "Poppins" == Poppins; // true
@debug "Open Sans" != "Roboto"; // true

// 색상
@debug rgba(53, 187, 169, 1) == #35bba9; // true
@debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8); // true

// 리스트
@debug (5px 7px 10px) != (5px, 7px, 10px); // true
@debug (5px 7px 10px) != [5px 7px 10px]; // true
@debug (5px 7px 10px) == (5px 7px 10px); // true

아래와 같이 다르게 나오는 부분이 있으니 nodesass의 version을 확인해주세요.

// 공식문서 @debug 1 != 1px; // true라고 나왔으니
//         @debug 1 == 1px; //는 false

window VSC extension 1 == 1px //false(확인)
window node-sass node 16.17v nodesass1 1 == 1px //true(확인) - npm 설치시 node sass 1.0
mac VSC extension 1 == 1px //false(확인)
mac node-sass node 16.17v nodesass1 1 == 1px //false(확인) - npm 설치시 node sass 1.55

아래와 같이 확인해보세요.

p {
    @if (1 == 1px) { //false
        font-size: 10px;
    } @else {
        font-size: 20px;
    }
}

6-2. 산술연산자 (숫자나 색)

a + b : a 와 b의 값을 더합니다.

a - b : a 에서 b의 값을 뺍니다.

a * b : a와 b의 값을 곱합니다.

a / b : a를 b로 나눕니다.

a % b : a 에서 b를 나눈 나머지 값을 구합니다.

//Sass 공식문서
@debug 10s + 15s; // 25s
@debug 1in - 10px; // 0.8958333333in
@debug 5px * 3px; // error 공식문서에는 15px*px 이라고 나옵니다.
@debug 1in % 9px; // 0.0625in (1in == 96px)

※ 나누기를 할 때 사용하는 슬래시/는 리스트에서도 사용하기 때문에 혼동을 줄 수 있습니다. 그래서 괄호를 사용하거나, 변수와 함께 사용하거나, 덧셈을 할 때 함께 써서 Scss에게 / 를 나누기 연산자임을 알려줘야 합니다.

⚠️ ERROR : 비교하거나 연산하는 값의 단위가 동일하지 않으면 에러가 발생합니다.

%와 같이 그렇지 않은 경우도 있습니다.
한 쪽의 단위가 실수이면 그렇지 않은 경우도 있습니다.
아래 참고할만한 코드를 삽입하였습니다.
목적에 따라 calc를 사용할 수 있습니다.(문자열 그대로 들어갑니다.)

//Sass 공식문서
@debug 100px + 10s;
// Error: Incompatible units px and s.

// test 코드
.one {
    font-size: 10px + 10px;
}

.two {
    font-size: 10px - 10px;
}

// 괄호가 있어야 합니다.
// 문자열로 반환
// .three {
//     font-size: 10px / 10;
// }

.three {
    font-size: (10px / 10);
}

// error
// .four {
//     font-size: 10px * 10px;
// }

// error
// .four {
//     font-size: 10px * 1in;
// }

// error
// .four {
//     font-size: (10px * 10px);
// }

// .four {
//     font-size: 10px * 10;
// }

// .four {
//     font-size: 10px * 10.1;
// }

// error
// .five {
//     font-size: 10px ** 10px;
// }

// 곱하기와 나누기와는 다르게 2개의 단위가 모두 있어도 애러가 나지 않습니다. 앞의 값으로 반환합니다.
// .six {
//     font-size: 10px % 3px;
// }

// .six {
//     font-size: 10px % 3;
// }

.six {
    font-size: 3in % 10px;
}

6-3. String의 `a + b`

앞서 말했던 + 연산자에서 a와 b가 모두 문자열이라면 문자열 a, b 를 합쳐서 새로운 문자열로 반환합니다. 만약 a나 b중 하나만 문자열이라 하더라도 문자열이 아닌 값은 문자열로 변환하여 두 값을 합친 문자열로 반환합니다.

//Sass 공식문서
@debug "Helvetica" + " Neue"; // "Helvetica Neue"
@debug sans- + serif; // sans-serif
@debug sans - serif; // sans-serif

@debug "Elapsed time: " + 10s; // "Elapsed time: 10s";
@debug true + " is a boolean value"; // "true is a boolean value";

// Scss
.status-bar {
	font-family : "Noto Sans KR", sans- + serif;
}

td {
	&::after{
		content : "Heades" + " up!"; // 문자열 더하기
	}
}

/*CSS*/
.status-bar {
  font-family: "Noto Sans KR", sans-serif; 
}

td::after{
	content : "Heades up!";
}

6-4. 논리연산자 (불리언 타입)

not : true이면 false를, false이면 true를 반환합니다.

and : 두개 다 true일때 true를 반환하고, 하나라도 false면 false를 반환합니다.

or : 두개 다 false면 false를 반환하고, 하나라도 true라면 true를 반환합니다.

출처 : 인프런 - [초급] 40분만에 훑어보는 Sass

수정

공부 기록

이전 포스트

SASS - 2장 파일 분리와 중첩(Nesting)

다음 포스트

SASS - 3장 변수(Variable)

Sass

변수(Variable)

1. css에서 변수라니?

2. 변수 생성하기

3. 변수 type

4. Lists, Maps

4-1. Lists

4-2. Maps

5. 변수의 Scope(변수의 유효범위)

5-1. 지역변수

5-2. 전역변수

6. Operator

6-1. 비교연산자 (숫자형)

6-2. 산술연산자 (숫자나 색)

6-3. String의 `a + b`

6-4. 논리연산자 (불리언 타입)

SASS - 2장 파일 분리와 중첩(Nesting)

SASS - 4장 믹스인(Mixin)

0개의 댓글

SASS - 3장 변수(Variable)

Sass

변수(Variable)

1. css에서 변수라니?

2. 변수 생성하기

3. 변수 type

4. Lists, Maps

4-1. Lists

4-2. Maps

5. 변수의 Scope(변수의 유효범위)

5-1. 지역변수

5-2. 전역변수

6. Operator

6-1. 비교연산자 (숫자형)

6-2. 산술연산자 (숫자나 색)

6-3. String의 a + b

6-4. 논리연산자 (불리언 타입)

SASS - 2장 파일 분리와 중첩(Nesting)

SASS - 4장 믹스인(Mixin)

0개의 댓글

6-3. String의 `a + b`