SCSS & SASS - 색상 내장 함수

01.SCSS 색상 내장 함수

• 색상 내장 함수는 이미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개의 인수값으로만 사용 가능 합니다.