[SCSS] 내장함수

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: mix($color, red);
    //background-color: lighten($color, 10%);
    //background-color: rgba($color, .2);
    background-color: invert($color);
  }
}

컴파일된 CSS

.box {
  width: 200px;
  height: 100px;
  margin: 20px;
  border-radius: 10px;
  background-color: royalblue;
}
.box:hover {
  background-color: #214cce;
}
.box.built-in {
  background-color: #be961e;
}