SCSS

• scss/ sass 차이점
  Variables { } ;
  Mixins = +

• 컴파일: sass에서 css로 변환되는 과정

주석

• /* */
  // scss → css 로 변환할때 나타나지 않음

중첩

• 꺽쇠괄호 > 자식 선택자

상위(부모) 선택자 참조

• 엠퍼센드 &

중첩된 속성

.box {
font: {
weight: bold;
size: 10px;
family: sans-serif;
};

변수

• 달러사인 $
  ex) $size: 100px;
  선언된 범위에서 유효범위를 가짐

산술 연산

• +, -, *, /, %

• 단축속성에서 /를 사용하기 때문에 scss에서는 사용 불가능함
  scss에서 /(나누기)를 사용하려면

1. ( )안에 기재하기
2. $ 변수에 기재하기
3. 다른 연산자와 같이 기재하기

• 단위를 같게 사용하기, 단 calc 함수를 사용하면 다르게 사용 가능함

재활용

• @mixin 재활용할 코드를 작성 (기본적인 css 스타일을 다루는 용도로 사용)
  @include 작성된 코드를 사용

• 인수( )
  키워드 인수: 인수 순서와 상관없이 값을 기재하여 사용하는 인수

반복문

• @for $i(ndex) from 1 through 10
  보간 처리 #{ $i}

함수

• @function (일반적인 값을 어떻게 처리해야할지에 대한내용 명시)
  @return

색상 내장 함수

• mix
  lighten
  darken
  saturate
  desaturate
  grayscale
  invert
  rgba

가져오기

• @import "./sub", "./sub2";

데이터 종류

• $ number
  $ string
  $ color
  $ boolean
  $ null
  $ list
  $ map

반복문

• list 데이터 반복적으로 처리하기
  @each $c in $list { }
• map 데이터 반복적으로 처리하기
  @each $key, $value in $map { }

재활용

• @mixin 상황에 맞게 추가적인 내용 삽입 가능
  @content