SCSS
내부에서 구현되어 있는 함수로서 색상과 관련하여 활용할 수 있는 함수입니다.
mix
함수는 두 가지 인수를 받아 색을 섞는 함수입니다.$color: royalblue
로 변수를 지정하고mix($color, red)
를 입력하면 두 가지 색을 섞어 새로운 색상을 내어줍니다.
lighten
함수는 말 그대로 색을 밝게 해주는 기능을 수행합니다.lighten($color, 10%);
와 같이 첫 번째 인수로는 색을 두 번째 인수로는 퍼센트를 입력하여 해당 퍼센트 만큼 밝게 만들어줍니다.
darken
함수는 말 그대로 색을 어둡게 해주는 기능을 수행합니다.- 해당 기능은
:hover
를 통해 색을 밝게 혹은 어둡게 하고 싶을 때 유용하게 활용할 수 있습니다.
saturate
함수는 퍼센트만큼 채도를 올려주는 함수입니다.- 반대로 채도를 낮춰주는 함수로는
desaturate
가 있습니다.
invert
함수는 색상을 반전 시켜주는 함수 입니다.
rgba($color, .5)
와 같이 두 가지 인수를 통해 색을 투명하게 만들어주는 함수입니다.- 이는
CSS
에서와rgba();
와 동일한 역할이지만CSS
의rgba(0, 0, 0, .5);
처럼 4개의 인수값이 필요하지 않으며 2개의 인수값으로만 사용 가능 합니다.