꾸준히 성장하는 개발자

SCSS 변수 활용 본문

CSS/SCSS

SCSS 변수 활용

ahleum 2022. 3. 25. 01:12

$변수: 값 ;

 

SCSS에서 변수 선언은 const나 let이 아닌 $로 선언이 된다

 

그리고 그 값을 쓸곳에 $변수라고 작성해주면 된다.

 

 

예시)

 

주의할점!!

선언된 범위에서 유효범위를 가진다.

위 예시처럼 맨위에 영역밖에서 작성이 되면 전역변수이지만

아래처럼 작성하게 되면 .container에서만 사용가능한 유효범위가 생긴다.

상황에 따라 잘 선택해서 사용하자

또 이렇게 .item에 size값 다른값으로 바꾸게 되면 이걸 재할당의 개념이 된다

그렇기 때문에 아래에서는 200px이 되고

.item의 밖 , 그리고 아래에 left에 작성한 size값은 재할당된 200px이 되게 된다.

'CSS > SCSS' 카테고리의 다른 글

SCSS 반복문  (0) 2022.03.29
SCSS - 재활용(Mixins)  (0) 2022.03.25
SCSS 산술 연산  (0) 2022.03.25
SCSS 문법  (0) 2022.01.09
scss  (0) 2022.01.09