What is Sass?
Sass is an abbreviation of Syntactically Awesome Stylesheet is a CSS pre-processor meta-language used to style a document cleanly with non-repeating code compared to flat CSS. It is an extension to CSS.
What is the Sass-color function?
It is important to understand the concept of the color component before starting the Sass color function. The color theory breaks down into three color attributes.
- HUE: It is the range of color models which is defined by a particular wavelength. if we say, Hue, it means pure pigment or it refers to the “color” we use.
- Saturation: It is the color intensity that measures the amount of hue present in the color. the more the pure color, the more the color is saturated. Saturated color attracts more due to its brightness and high intensity.
Value: The degree of darkness and lightness is called color value. Each color has a different value. It ranges from tints(slightly lighter) to shades(darkness), defined as the intensity of light present in color.
Fig 1: Hue, Saturation, Value
What is a Color Model?
A color model is a mathematical representation of the color that defines the manners colors are represented as tuples of numbers. There are different color models such as RGB, CMKY, HSL, etc., but only RGB and HSL models relate to Sass development.
RGB is the measure for Red, Green Blue in fundamental colors. Component value measure among 0 to 255. RGB expressed in hexadecimal numbers as #ff0000 or #FF8C00.
HSL stands for Hue, Saturated, and lightness or HSV, where V is value. It is defined as a function.
HSL($hue, $saturation, $value)
In the HSL model, hue is expressed in degrees as pure red at 0 degrees, pure green at 120 degrees, and pure blue at 240 degrees. saturation and value are expressed in percentage
Fig: 2 HSL Color Wheel
Opacity: opacity is an additional feature of color that is not present in the traditional color model. It defines the transparency of color. It is defined by alpha in both RGB and HSL models. It contains 0 to 100% percentages were 0 for completely transparent and 100% for complete opaque color. The opacity value is always between 0 to 1.
What is the Sass-color function?
Sass color Functions are a function that allows working with color digitally. RGB() and HSL() are used to make concise CSS. Sass color Function is divided into three parts.
- Set color Functions
- Get color Functions
- Manipulate color Functions
Set color Functions:
It sets color by using the RGB model. RGB is defined with RGB(red, green, blue). The integer value between 0 to 255 or percentage between 0 to 100% defines the intensity of defined color. This is also called the color creation function.
|rgb($red, $green, $blue)||It creates opaque color based on a given integer or percentage value. Set the color by using the RGB color model. The integer value between 0 to 255 or percentage between 0 to 100% defines the intensity of defined color.||RGB(255, 140, 0); // rendered as orange color|
rgb(50%, 50%, 100%)
|rgba($red, $green, $blue, $alpha)||It creates color based on a given integer or percentage value at specified opacity.||rgba(172, 65, 56, 0.5 )|
rgba(172, 65, 56, 0.5 )
|HSL($hue, $saturation, $lightness)||Set an opaque color based on given hue (degree), saturation, and lightness(percentage)||HSL(341, 26%, 59%)|
|hsla($hue, $saturation, $lightness, $alpha)||It creates color based on a given integer or percentage value at specified opacity.||hsl(120, 100%, 50%, 0.5); // green with opacity|
|grayscale($color)||It returns a gray value that has the same lightness as “color.”||grayscale(#7fffd4);|
|complement($color)||Sets a color that is the complementary color of color.||complement(#7fffd4);|
|invert($color)||It creates a color that is the inverse color of the specified “color.” The weight parameter is optional. It should be a number between 0% and 100%. The default value is 100%.||invert(#ad4038)|
Sass Get/Extraction color Functions:
Returns the hue of color as a number between 0 degrees and 255 degrees. Returns the HSL saturation of color as a number between 0% and 100%. Returns the HSL lightness of color as a number between 0% and 100%. It is also called Sass Extraction Function.
|red($color)||Returns as a number which is red value color between 0 and 255.||red(#ad4038)|
|green($color)||Returns as a number which is green value color between 0 and 255.||green(#ad4038)|
|blue($)color||Returns as a number which is blue value color between 0 and 255.||blue(#ad4038);|
|hue(($color)||Returns the hue of color in numbers between 0 degrees and 255 degrees.||hue(#ad4038)|
|saturation($color)||Output the saturation of color in numbers between 0% and 100%.||saturation(#d747d2)|
|lightness($color)||Returns the lightness element of color in numbers between 0% and 100%.||lightness(#d747d2)|
|alpha($color)||Return value always between 0 and 1||alpha(#ad4038)|
|opacity($color)||Return value always between 0 and 1||opacity(rgba(215, 71, 210, 0.7);|
Manipulate color Functions:
Sass Manipulate Color Functions adjust the color’s hue with a degree from -360deg to 360deg. This function allows manipulating colors in various ways.
|mix($color1, $color2, $weight)||It creates a mixture of color1 and color2 with optional attribute weight. weight decide the usage of color1.||mix(#ad4038, #0000ff, 80)|
|adjust-hue($color, $degree)||This function adjusts the hue of color with a degree from -360 degrees to 360 degrees.||adjust-hue(#ad4038, 20)|
|lighten($color, $amount)||This function creates a lighter shade of color with a value between 0% and 100%. The amount parameter increases the lightness by percent.||lighten(#ad4038, 20)|
|darken($color, $amount)||This function creates a darker shade color with a value between 0% and 100%. The amount parameter decreases the lightness by percent.||darken(#ad4038, 20)|
|saturate($color, $amount)||With the given amount percentage, enhance the saturation of the specified color.||desaturate(#ad4038, 20)|
|rgba($color, $alpha)||This function creates new color with the given alpha channel||rgba(#ad4038, 50)|
rgba(172, 65, 56, 0.5)
|transparentize($color, $amount)||Creates transparency in the color with the value between 0 and 1.||transparentize(#ad4038, 50)|
rgba(172, 65, 56, 0.5)
In this article, we discussed one of the Sass functions, which is the color function. Sass color Functions are a function that allows working with color digitally. Two-color models RGB and HSL, are related to Sass color development. This function works on Hue, Saturation, and value of a color model. Sass Function divided into three fundamental parts; Set color Functions, Get color Functions, Manipulate color Functions.