SCSS는 Sass보다 CSS와 문법(중괄호와 세미콜론)적으로 유사한 CSS preprocessor이다.

1. 주석(comment)

/* /, // 두가지 주석을 제공한다.
css 파일로 컴파일 했을 때 / */ 주석은 css 파일에 남아있으나 // 주석은 사라진다.

h1 {
  /* color: royalblue */
  // font-size: 60px;
}

2. 중첩

.container {
  ul {
    li {
      .name {

      }
      .age {
        
      }
    }
  }
}

3. 상위 선택자 참조

&는 상위 선택자를 참조한다.
&가 상위 선택자를 대체한다고 생각해도 될 것 같다.

.btn {
  position: relative;
  &.active {            // 일치 선택자
    color: red;
  }
}

.list {
  li {
    &:last-child {       // 가상 클래스 선택자
      margin-top: 12px;
    }
  }
}

.fs {
  &-small { font-size: 12px; }
  &-medium { font-size: 14px; }
  &-large { font-size: 16px; }
}

4. 중첩된 속성

콜론(:)을 통해 네임스페이스를 지정하여 반복을 줄여 작성할 수 있다.

.box {
  font: {
    weight: bold;   // font-weight
    size: 10px;
    family: sans-serif;
  };
  margin: {
    top: 10px;   // margin-top
    left: 20px;
  };
  padding: {
    top: 10px;   // padding-top
    bottom: 40px;
    left: 20px;
    right: 30px;
  }
}

5. 변수

$를 이용하여 변수를 선언할 수 있다.
scss에서의 변수 또한 유효범위를 가지고 오버라이딩 될 수 있다.

$size: 100px;

.container {
  position: fixed;
  top: $size;
  .item {
    width: $size;
    height: $size;
  }
}

6. 산술 연산

기본 연산자를 사용하거나, calc함수를 사용한다.

div {
  width: 20px + 20px;
  height: 40px - 20px;
  font-size: 10px * 2;
  margin: (40px / 2);  
  padding: 20px % 7
}

.container {
  width: calc(100% - 200px);
}

7. Mixin

@mixin으로 지정하고 @include로 불러온다.
함수처럼 인수와 매개변수를 이용할 수 있다.
인수가 없을 때 사용할 기본값을 매개변수에 콜론(:) 을 이용해 지정할 수 있다.
키워드 인수를 통해 매개변수의 순서와 상관없이 인수를 전달할 수 있다.

@mixin center($size: 100px, $color: red) {
  width: $size;
  display: center;
  justify-content: center;
  align-items: center;
  background-color: $color
}

.contianer {
  @include center(300px, blue);
  .item {
    @include center(200px, blue);
  }
}

.box1 {
  @include center();
}

.box2 {
  @include center($color: blue);  // 키워드 인수 
}

8. 반복문

@for $i from # through # 를 이용한다.
#{}을 이용하여 문자보간할 수 있다.

@for $i from 1 through 10 {
  .box:nth-child(#{$i}) {  // 값을 입력하는 곳이 아니기 때문에 문자 보간을 사용
    width: 100px * $i    
  }
}

9. 함수

@function 과 @return 키워드를 이용하여 javascript의 함수와 동일한 구조로 함수를 선언할 수 있다.

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

.box {
  $width: 100px;

  width: $width;
  height: ratio($width, 9/16);
}

9.1. 색상 내장 함수

$color: royalblue;


mix($color, red);
lighten($color, 10%);
darken($color, 10%);
saturate($color, 10%);  //채도를 올림
desaturate($color, 10%); // 채도를 낮춤
grayscale($color);
invert($$color);  // 색 반전
rgba($color, .5);  //  4개가 아닌 2개의 인수

10. 가져오기

'url ( )' 함수를 사용하지 않고 좀 더 간소회된 문법으로 import 기능을 제공한다.
@import "./sub1", "./sub2"

11. 데이터 종류

$number: 1;   // .5, 100px, 1em
$string: bold;  // relative, "../image/a.png"
$color: red;   // #ffff00, rgba(0,0,0,0.1)
$boolean: true;  // false
$null: null;
$list: orange, royalblue, yellow;
$map: (
  o: orange,
  r: royalblue,
  y: yellow
)

11.1 @each

each 반복문 활용

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


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

@each $k, $v in $map {
  .box-#{$k} {
    color: $v;
  }
}

11.2 @content

@mixin에 추가적인 내용을 @include 때 추가하고 싶은 경우 @content를 사용한다.

@mixin left-top {
  position: absolute;
  top: 0;
  left: 0;
  @content;
}

.box {
  @include left-top() {
    bottom: 0;
    right: 0;
    margin: auto;
  }
}