SCSS 색상 내장 함수

SCSS 색상 내장 함수

색상 내장 함수는 SCSS 내부에서 구현되어 있는 함수로서 색상과 관련하여 활용할 수 있는 함수입니다.

mix 키워드는 두 가지 인수를 받아 색을 섞는 함수입니다. $color: royalblue 로 변수를 지정하고 mix($color, red)를 입력하면 두 가지 색을 섞어 새로운 색상을 내어줍니다.

두 번째는 lighten 함수로 말 그대로 색을 밝게 해주는 기능을 수행합니다. lighten($color, 10%)와 같이 첫 번째 인수로는 색을, 두 번째 인수로는 퍼센트를 입력하여 밝게 만들어줍니다. 반대의 개념으로 darken도 있습니다. 특히, 해당 기능은 hover 를 통해 색을 밝게 혹은 어둡게 하고 싶을 때 유용하게 활용할 수 있습니다.

다음으로 saturate 함수는 saturate($color, 40%)로 활용 가능하며 채도를 올려주는 기능입니다. 반대는 desaturate가 있습니다.

또한, rgba 함수는 매우 유용하게 사용할 수 있습니다. rgba($color, .5)와 같이 두 가지 인수를 통해 색을 투명하게 하는 기능입니다. 이는 CSS에서와 rgba와 동일한 역할이지만, rgba(0, 0, 0, .5)처럼 4개의 값이 필요한 CSS와 비교하여 더욱 쉽게 활용할 수 있습니다.

이외에 회색을 만들어주는 grayscale($color), 색을 반전시켜주는invert($color) 함수가 있습니다.

1. SCSS

.box {
  $color: royalblue;
  width: 200px;
  height: 100px;
  margin: 20px;
  border-radius: 10px;
  background-color: $color;
  &:hover {
    background-color: darken($color, 10%)
  }
  &.built-in {
    background-color: rgba($color, .5);
  }
}

2. CSS(Compiled)

.box {
  width: 200px;
  height: 100px;
  margin: 20px;
  border-radius: 10px;
  background-color: royalblue;
}
.box:hover {
  background-color: #214cce;
}
.box.built-in {
  background-color: rgba(65, 105, 225, 0.5);
}