Summary
Highlights
Functions in SASS are similar to mixins but differ in their primary purpose. While mixins group properties and take arguments, functions typically return a single value after potentially performing manipulations with arguments. An example of a built-in SASS function is the 'lighten' function, which takes arguments and returns a color value for properties like background color.
To demonstrate custom functions, a new button variant called 'button-complement' is introduced. This variant will override the button's default color property using a custom function. The goal is to create a function that takes a color as an argument and returns its complementary color, which is also lightened.
A new file '_functions.scss' is created to house the custom function. The function is defined using '@function light-comp($color)'. Inside the function, local variables are used to first find the complementary color using the built-in 'complement' SASS function. Then, this complementary color is lightened using the built-in 'lighten' function. Finally, the 'lightened complement' value is returned using '@return'.
The '_functions.scss' file is imported into the main SASS stylesheet. The 'light-comp' function is then used for the 'color' property of the 'button-complement' class, and also for the 'background-color' property on hover. This allows the button's text color and hover background color to dynamically adjust based on the complementary and lightened values of the primary color.
Two new complementary buttons are added to the HTML template for purple and primary colors. Initially, an error occurs because the 'lighten' function requires an amount in percentage. The function is corrected by adding '30%' as the second argument to the 'lighten' function. After this fix, the buttons display correctly with the desired complementary and lightened colors for text and on hover.