SCSS - 2

반복문

4번 반복 합니다.
@for $i from 1 to 5 {
}

@for $i from 1 to 5 {     1부터 5전까지
   .container{
       color:red;
   }
}

.container {color: red;} 
.container {color: red;}
.container {color: red;}
.container {color: red;}       //4개 출력

순전히 이렇게 사용하는건 뭔가 비효율적 입니다.

그래서 보통 인접 형제의 순서를 나열할때 유용합니다.

자바스크립트에서의 보간은 ${} 지만 SCSS 에서는 #{} 을 써줍니다

scss
@for $i from 1 to 5 {
    .box:nth-child(#{$i}){
        width : 50px * $i;
    }
}

css
.box:nth-child(1) {width: 50px;}

.box:nth-child(2) {width: 100px;}

.box:nth-child(3) {width: 150px;}

.box:nth-child(4) {width: 200px;}

함수

@function raito(para) {body}

대부분의 모니터 비율은 16:9 입니다.
이를 함수로 구현해 간단하게 대입 해보겠습니다.

@function raito($width) {
 @return  $width * (9/16)
}

.box{
 $width:1920px;               // 원하는값 입력
 width: $width;
 height:raito($width);
}

결과

.box {
 width: 1920px;
 height: 1080px;
}

내장 색상 함수

가져오기

VSC 기준으로 SCSS 파일은 다른 SCSS 파일을 손쉽게 가져올수 있습니다.
자바스크립트와 달리 export 할 필요 없이 import 만 해도 되죠
@import url('./tset.scss'); 다만 좀더 간략하게 @import './tset'; 로 표현할수도 있습니다.한번에 가져올때는 @import './test','./tset2'; , 콤마를 씁니다.

데이터

SCSS 에서의 데이터 종류 입니다.

@each

@each 는 반복문과 유사한 형태입니다. 다만 서로다른 형태로 반환하죠
@each $var in list {}
리스트를 사용해 아래와 같이 표현할수 있습니다. 배열처럼 순서대로 생성합니다.

$list: orange,red,blue;
@each $col in $list {
    .box{
      color:$col
    }
}

.box {
  color: orange;
}

.box {
  color: red;
}

.box {
  color: blue;
}

map은 객체와 유사한 형태입니다. 키와 값을 가지고 있죠
자바스크립트와 다른점은 {} 중괄호가 아닌 () 소괄호를 사용합니다.

map은 키와 값을 가지고 있기때문에 변수를 두개 선언합니다

@each $key ,$value in $map {}

변수가 2개이기 때문에 원하는곳에 추가로 사용할수 있습니다.

SCSS
$map:(
  o:orange,
  r:red,
  b:blue
);
@each $key ,$value in $map {
    .box-#{$key}{
      color: $value
    }
}

CSS
.box-o {
  color: orange;
}

.box-r {
  color: red;
}

.box-b {
  color: blue;
}

보간법을 이용해서 서로다른 클래스에 적용할수 있습니다.