scss 컬러내장함수

<div class="box"></div>
<div class="box built-in"></div>
<div class="box built-in2"></div>

.box{
  $color:royalblue;
  width:200px;
  height:200px;
  margin:20px;
  border-radius:10px;
  background-color:$color;
  &.built-in{
    background-color:lighten($color,10%);
    &:hover{      background:darken($color,10%);
    }
  }
  &.built-in2{
    background-color:mix($color,red);
    &:hover{      background:grayscale($color);
    }
  }
}
//saturte,grayscale,desaturate,lighten,darken,invert,rgba($color,0.5)..