SCSS

: CSS Preprocessor (CSS 전처리기)

main.scss

parcel-bundler 패키지를 설치해두면

sass 를 인지하여 자동으로 설치!

sass 는 scss -> css 로 바꿔준다.

작성법

$color : royalblue;
.container {
  h1 {
    color : $color;
  }
}

주석

• 본래 css 주석은 남는다.
• // 주석은 css로 컴파일 되지않는다.

중첩 with SassMeister

• 상위선택자 안에 중첩으로 넣어 작성할 수 있다.

.container {
  ul{
    li{
      .name {
      
      }
      .age {
      
      }
    }
  }
}

• & 기호를 통해 상위 선택자를 참조할 수 있다.( 상위 선택자를 &로 치환 )

.btn {
  position: absolute;
  &.active {
    color: red;
  }
}

상위(부모) 선택자 참조

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

중첩된 속성

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

변수

$size: 200px;

• 변수 유효 범위를 활용할 수 있다.

• 필요한 부분 안쪽에서 생성하면 그 부분안쪽에서만 유효하다.

산술 연산

• 연산자를 사용할 수 있다.

• 단축 속성 사용방법과 겹치면 동작하지 않는다. 겹치는 경우 () 소괄호로 묶어주면 사용이 가능하다.
  ( 변수 할당받아 연산하거나 다른 연산자와 함께 사용하면 가능하다.)

• 단위가 동일해야한다.

• calc() 사용. 다른 단위 연산 가능.

재활용(Mixins)

• 여러개의 속성을 설정하여 재활용할 수 있다.

• 인수를 넣어 사용할 수 있다.( 기본 설정도 가능 - 인수설정을 안해주면 기본으로 사용 )

// 설정.
@mixin center($size: 100px, $color:tomato) {
  display: flex;
  justify-content: center;
  align-items: center;
  width: $size;
  background-color: $color;
}


.container {
  // 활용
  @include center(200px, red);
  .item {
    @include center($color:tomato);
  }
}

반복문

• 1부터 연산한다.( not zero base )

• 보간 ( #{$i} ) js 의 ${} 과 같은 기능.

• 실제 값을 넣는 부분은 보간이 필요없다.

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

함수

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

색상 내장 함수

mix()

mix($color, red);

: 첫번째 인수 색상과 두번째 인수 색상을 섞는다.

lighten()

lighten($color, 10%)

: 두번째 인수 만큼 더 밝게 해준다.

darken()

darken($color, 10%);

: 두번째 인수 만큼 더 어둡게 해준다.

saturate()

saturate($color, 10%)

: 두번째 인수 만큼 채도를 올려준다.

desaturate()

desaturate($color, 10%)

: 두번째 인수 만큼 채도를 낮춰준다.

grayscale()

grayscale($color)

: 색상을 회색으로 바꿈

invert()

invert($color)

: 색상 반전

rgba()

rgba($color, .5)

: 두번째 인수만큼 투명도를 준다.

가져오기

@import url("./sub.scss");

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

데이터 종류

• 유사 배열

$list: orange, royalblue, yellow;

• 유사 객체

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

반복문 @each

$list: orange, royalblue, yellow;

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

.box {
  color: orange;
}
.box {
  color: royalblue;
}
.box {
  color: yellow;
}

재활용 @content

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

.container {
  width: 100px;
  height: 100px;
  @include left-top {
    margin: auto;
  }
}

• 추가로 넣은 속성은 @mixin의 @content 자리에 들어가서 적용된다.

.contatine {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
}