SCSS 변수
SCSS 변수
$
기호를 이용하여 JavaScript에서 사용하는 const
, let
등과 마찬가지로 변수를 선언할 수 있습니다.
$size: 100px;
의 예처럼 앞에 $
를 적고 할당 연산자로 :
을 사용하는 방식으로 size
라는 변수에 값을 입력합니다. 해당 변수는 SCSS 내에서 반복적으로 활용이 가능하기 때문에 자주 사용되는 기능입니다.
다만, 유의해야할 점은 변수는 선언한 범위 내에서 유효 범위를 가집니다. 전역 변수는 문제 없이 모두 활용이 가능하나 변수가 특정한 중괄호 내에서 사용이 된다면, 해당 범위 내에서만 유효 범위를 가지므로 다른 곳에서는 활용이 불가합니다.
추가적으로 let
과 동일하게 재할당이 가능합니다. 재할당된 변수는 let
과 마찬가지로 이후 해당 유효 범위 아래에서 할당된 값으로 활용됩니다. 아래의 예시를 살펴봅시다.
1. SCSS
.container {
$size: 200px;
position: fixed;
top: $size;
.item {
$size: 100px;
width: $size;
height: $size;
transform: translateX($size);
}
left: $size; // 값: 100px; item 중괄호 내에서 재할당된 값
}
.box {
width: $size; // 중괄호 내에 size 변수가 선언되지 않았으므로 활용 불가
}
2. CSS(Compiled)
.container {
position: fixed;
top: 200px;
left: 100px;
}
.container .item {
width: 100px;
height: 100px;
transform: translateX(100px);
}
Author And Source
이 문제에 관하여(SCSS 변수), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hanei100/SCSS-변수저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)