1. Sass/SCSS에서 변수를 왜 사용할까?
스타일을 작성하다 보면, 속성값을 반복해서 사용하는 경우가 많다. 자주 반복되는 스타일을 수정하는 일은 무척 번거로운 작업이다.
=> 유지보수가 매우 쉬워진다.
그렇다고 해서 무분별하게 변수를 남발해서는 안된다. 타당한 이유가 있는 변수들을 우선순위로 생성한다.
- 값이 두 번 이상 반복되는 경우
- 기존의 값을 다른 값으로 변경할 가능성이 높은 경우
변수를 생성하면 된다.
변수명은 직관적인 이름으로 짓는 것이 좋다. 영문자와 숫자, 그리고 -, _를 포함할 수 있다.
컴파일된 CSS 파일에서 변수는 보이지 않는다.
2. 변수 생성하기($)
$ 기호를 사용해서 스타일을 적용할 값(색상, 폰트사이즈, 이미지 URL)을 저장한다.
<body>
<button class="first-btn">첫번째</button>
<button class="second-btn">두번째</button>
<button class="third-btn">세번째</button>
</body>//SCSS
$main-color: orange;
$font-color:white;
$btn-width: 100px;
button{
&:nth-child(1){
color:$font-color;
background:$main-color;
width: $btn-width;
}
&:nth-child(2){
color:$font-color;
background: $main-color;
width: $btn-width;
}
&:nth-child(3){
color:$font-color;
background: $main-color;
width: $btn-width;
}
}
//CSS
button:nth-child(1) {
color: white;
background: orange;
width: 100px;
}
button:nth-child(2) {
color: white;
background: orange;
width: 100px;
}
button:nth-child(3) {
color: white;
background: orange;
width: 100px;
}/*# sourceMappingURL=style.css.map */
색상, 폰트, 너비를 변수로 만들어 스타일 값을 지정했다. 만약 배경색을 다른 색으로 바꾸고 싶다면 button의 속성을 하나하나 수정시킬 필요 없이 $main-color 값만 다른 값으로 지정해주면 된다.
3. 변수타입(type)
숫자, 문자열, 색상, 불리언값(true, false), null, lists 형태 모두 입력 가능하다.
참고
https://millie.page.link/fJ1WA
40 minutes Basic Sass
Front-End의 CSS를 하다 보면 어렴풋이 들려오는 Sass.Sass가 효율적인 스타일 적용에 도움이 된다 하지만, 막상 Sass를 공부하려니 주저하셨나요? S..
www.millie.co.kr
'HTML & CSS > SASS(SCSS)' 카테고리의 다른 글
| Sass/SCSS 문법 4. Maps와 @each문 사용하기 (0) | 2023.01.26 |
|---|---|
| Sass/SCSS 문법 3. Lists (0) | 2023.01.26 |
| Sass/SCSS 문법 1. 중첩(Nesting)과 주석 (0) | 2023.01.26 |
| Sass 터미널 명령어 --style compressed / --watch (0) | 2023.01.24 |
| Sass 설치하기(2) - 터미널 명령어 사용 (0) | 2023.01.24 |