1. Lists(목록형 변수)
리스트는 순서가 있는 값이다. lists의 요소들을 쉼표나 공백 또는 / 로 구분하여 생성하고, 다른 타입의 변수들과 다르게 특수 괄호를 사용하지 않아도 lists로 인식한다.
빈 lists를 만들 때나 lists에 들어있는 값이 하나인 경우, [] 나 ()를 사용하여 생성한다.
lists 값의 인덱스는 1부터 시작한다.
<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, 200px, 300px;
button{
&:nth-child(1){
color:$font-color;
background:$main-color;
width: nth($btn-width,1);
// width: 100px
}
&:nth-child(2){
color:$font-color;
background: $main-color;
width: nth($btn-width,2);
//width: 200px
}
&:nth-child(3){
color:$font-color;
background: $main-color;
width: nth($btn-width,3);
//width: 300px
}
}
//CSS
button:nth-child(1) {
color: white;
background: orange;
width: 100px;
}
button:nth-child(2) {
color: white;
background: orange;
width: 200px;
}
button:nth-child(3) {
color: white;
background: orange;
width: 300px;
}/*# sourceMappingURL=style.css.map */
2. Lists 내장함수
- nth(list명, index): lists의 인덱스에 해당하는 값을 리턴하는 함수
- index(list, value): lists의 값에 대한 인덱스를 리턴하는 함수
- append(list, value, [separator]): lists의 값을 추가하는 함수
'HTML & CSS > SASS(SCSS)' 카테고리의 다른 글
| Sass/SCSS 문법 5. 믹스인(Mixins) (0) | 2023.01.26 |
|---|---|
| Sass/SCSS 문법 4. Maps와 @each문 사용하기 (0) | 2023.01.26 |
| Sass/SCSS 문법 2. 변수(Variables) (0) | 2023.01.26 |
| Sass/SCSS 문법 1. 중첩(Nesting)과 주석 (0) | 2023.01.26 |
| Sass 터미널 명령어 --style compressed / --watch (0) | 2023.01.24 |