SCSS - 색상 내장 함수

mix("첫번째", "두번째"): 첫번째 인자, 두번째 인자값을 섞어서 색상을 표현해주는 함수

background-color: mix(royalblue, red);

lighten("첫번째", "두번째"): 첫번째 인자의 색상을 두번째 인자의 비율만큼 밝게 표현

background-color: lighten(royalblue, 10%);

darken("첫번째", "두번째"): 첫번째 인자의 색상을 두번째 인자의 비율만큼 어둡게 표현

background-color: darken(royalblue, 10%);

버튼을 만들 때 유용하게 사용된다. (마우스를 올리면 색이 진해지도록 설정)

&:hover {
      background-color: darken(royalblue, 10%);
      }

 

saturate("첫번째 인자", "두번째 인자"): 첫번째 인자의 색상을 두번째 인자의 비율만큼 채도를 올린다.

    background-color: saturate(royalblue, 40%);

 

desaturate("첫번째 인자", "두번째 인자"): 첫번째 인자의 색상을 두번째 인자의 비율만큼 채도를 낮춘다.

background-color: desaturate(royalblue, 40%);

rgba("첫번째 인자", "두번째 인자"): 투명도 설정을 해줄 수 있다.

background-color: rgba(royalblue, .5);