[SCSS] 색상 관련 내장함수

HTML

<div class="box1">default</div>
<div class="box2">darken</div>
<div class="box3">lighten</div>
<div class="box4">saturate</div>
<div class="box5">desaturate</div>
<div class="box6">adjust-hue</div>
<div class="box7">opacity</div>

 

SCSS

$red : #d8222b;

div { width: 10rem; height: 10rem; margin: 1rem; display: inline-block;
text-align: center; line-height: 10rem; color: #fff; font-size: 1.4rem; }
.box1 { background-color: $red; }
.box2 { background-color: darken($red, 30%); }
.box3 { background-color: lighten($red, 30%); }
.box4 { background-color: saturate($red, 30%); }
.box5 { background-color: desaturate($red, 30%); }
.box6 { background-color: adjust-hue($red, 30%); }
.box7 { background-color: rgba($red, .3); }

 

See the Pen SCSS 색상 관련 함수 by lpla (@lpla) on CodePen.