SCSS

• npm init -y (npm 질문을 하지 않고 생성을 한다)

• npm i -D parcel-bundler (npm을 어떤 이름으로 설치할건지)

• &:last-child 자신이 포함된 영역에 상위 선택자를 참조한다.

변수

• 변수를 주면 scss에서 재활용을 할 수 있다. (반복적으로 사용할때 유용하다.)
• 선언된 범위에서 유효범위를 가진다. ()
• $size: 100px; 코드 블록 안에 있으면 지역 변수 밖에있으면 전역 변수다.

.container {
  $size: 200px; // 유효범위 (선언된 중괄호 안에서만 쓸 수 있다.)
  position: absolute;
  top: $size; // 200px
  left: $size; // 100px 변수가 재할당 되면 item에 있는 $size가 100px로 선언되었으므로 100px이 나오는것이다 
  .item {
    $size: 100px;
    width: $size; // 100px
    height: $size; // 100px
  }
  left: $size;
}

연산자

• 자바스크립트 연산자랑 똑같다.

• 나누기 연산자는 단축 속성 때문에 30px / 2 가 안먹힌다.
  그래서 3가지 방법을 쓰면 나누기 연산자가 잘 작동한다.

div {
  $size = 30px;
  width: 20px + 20px; //40px
  height: 40px - 10px; // 30px
  font-size: 10px * 2; // 20px
  // 나누기 연산자 3가지 방법이 있습니다.
  margin: (30px / 2); // 15px 
  margin: $size / 2 
  margin: (10px + 12px) / 2  //11px
  padding: 20px % 7; // 6px
}

재활용 (mixin)

• @mixin 속성을 미리 부여해서 @include로 할당하면 해당속성이 적용된다.

• @content 사용자가 상황에 맞게 추가적인 내용을 삽입을 해줄 수 있다.

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  @include center;
  .item {
    @include center;
  }
}
.box {
  @include center;
}

@mixin box($size: 80px, $color: tomato) {
  width: $size;
  height: $size;
  background-color: $color;
}
.container {
  @include box(200px, red);
  .item {
    @include box($color: green); // 키워드 인수
  }
}
.box {
  @include box;
}

함수

• 자바스크립트 함수랑 구조가 비슷합니다.

function ratio ($size, $ratio) {
  @return $size * $ratio 
}

.box {
  $width: 100px;
  width: $width;
  height: ratio($width, 1/2);
}

색상 내장 함수

• mix(색상, 색상) 1번째 인수에 색상과 2번째 인수에 색상을 섞어서 새로운 색상을 반환시켜준다.

• lighten(색상, 밝기(10%)) 더 밝게

• darken(색상, 밝기(10%)) 더 어둡게

• saturate(색상, 채도(40%)) 채도가 40%만큼 오른다

• desaturate(색상, 채도(40%)) 채도가 40%만큼 떨어진다

• grayscale(색상) 원래색상에 grayscale이 적용이된다.

• invert(색상) 색상을 반전시킨다.

• rgba(색상, 투명도) css랑 다르게 scss는 2개에 인수만 넣으면된다.

데이터 종류

• $number : 1; (5, 100px, 1em)

• $string : bold (relative, "../images/a.png")

• $color : red (blue, #FFFF00, rgba(0,0,0,.2))

• $boolean : true (false)

• $null : null

• $list : orange, royablue, yellow
  ($list는 자바스크립트 배열이랑 비슷하다)

• $map: (
  o: orange,
  r: royalblue,
  y: yellow
  );
  ($map는 자바스크립트 객체 데이터랑 비슷하다)

반복문

• 자바스크립트 반복문이랑 비슷합니다.

• $i: 변수 이름

• from: 몇번째 숫자부터 시작할꺼냐

• through: 몇번을 반복할꺼냐

• #{}: 보간하는방법

@for $i from 1 through 10  {
  .box:nth-child(#{$i}) {
    width: 100px * $i;
  }
}

$list : orange, royablue, yellow;

@each $c in $list {
  .box {
    color: $c;
  }
}

$map: (
  o: orange,
  r: royalblue,
  y: yellow
); 

@each $key, $value in $map {
  .box-#{$key} {
    color: $value;
  }
}