CSS Preprocessor

SCSS

npm init -y
npm i -D parcel-bundler

주석

기본적인 css의 주석인 /**/ 와 // 두가지 사용
/**/ 경우 CSS로 컴파일시 동일하게 주석처리
// 경우 CSS로 컴파일시 코드가 사라짐

중첩

• css

.container ul li {
  font-size: 40px;
}
.container ul li .name {
  color: royalblue;
}
.container ul li .age {
  color: orange;
}

• Scss

.container {
  ul {
    li{
      font-size: 40px;
      .name {
        color: royalblue; 
      }
      .age {
        color: orange;
  
      }
    }
  }
}

상위 선택자 참조

• css

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

• scss

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

중첩된 속성

• css

.box {
  font-weight: bold;
  font-size: 10px;
  margin-top: 10px;
  margin-left: 20px;
}

• scss

.box {
    font: {
        weight: bold;
        size: 10px;
    };
    margin: {
        top: 10px;
        left: 20px;
    };
}

변수

$변수: 값;
색상이나 값
유효범위: 같은 중괄호 내에서만 사용가능

연산

단위가 같아야 함
(css에서는 단위가 다른 경우 calc 이용)

기호	연산
+	덧셈
-	뺄셈
*	곱셈
%	나머지연산
(/)	나눗셈

mixing

• css

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .item {
  display: flex;
  justify-content: center;
  align-items: center;
}

• scss

@mixin center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    @include center;
    .item {
        @include center;
    }
}

반복문

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

보간: # 사용1

함수

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

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

색상 내장 함수

mix(color, color) 조합
lighten(color, n%) 밝게
darken(color, n%) 어둡게
saturate(color, n%) 채도 증가
desaturate(color, n%) 채도 감소
grayscale(color) 회색화
invert(color) 반전
rgba(color, n(투명도)) 색상 투명화