Sass color function

Time:2022-5-27

In this section, let’s take a look at the color function in sass. The color function can be divided into three parts: color setting, color acquisition and color operation. There are many color functions in sass. Let’s look at some commonly used color functions in sass:

function describe
rgb() Create a red green blue (RGB) color
rgba() Create a color with a transparency value
hsl() Creates a color with values for hue, saturation, and brightness
hsla() Creates a color with values for hue, saturation, brightness, and transparency
red() Gets the red value from a color
lightness Gets the luminance value of a color (0% – 100%)
alpha Returns the alpha channel of the color as a number between 0 and 1
opacity Get color transparency value (0-1)
mix() Mix the two colors together
fade-in() Reduce the transparency of the color. The value is 0-1.
fade-out() Increase the transparency of the color. The value is between 0-1.

Rgb() function

rgb()The function creates a red green blue (RGB) color, where R is red, G is green, and B is blue. RGB values range from 0 to 255.

Example:

We should be familiar with this function. This function is also used to set the color value in CSS:

.xkd{
    background: rgb(240, 236, 122);
    color: rgb(15, 88, 96);
}

Compile into CSS code:

.xkd {
  background: #f0ec7a;
  color: #0f5860;
}

It should be noted thatrgb()The parameter value range in the function cannot exceed 255 before 0 to 255, otherwise it will become invalid.

Rbga() function

rbga()Use and of functionsrgb()Functions are almost the same. They are used to create colors, butrgba()One more inalphaThat is, color transparency. The value range of color transparency is a decimal between 0 and 1, for example0.10.2 0.3The smaller the value, the more transparent the color is.

Example:

For example, we set the transparency of a black color to 0.6:

.xkd{
    background: rgba(0, 0, 0, 0.6);
    color: rgb(0, 0, 0);
}

Compile into CSS code:

.xkd {
  background: rgba(0, 0, 0, 0.6);
  color: black;
}

You can try it yourself. When you set different transparency values, what effect will it have. Generally, when making web pages, we will set transparency for some background colors.

Hsl() function

hsl()The function creates a color from hue, saturation, and lightness values.

Example:
.xkd{
    color: hsl(100, 100%, 60%);
    a{
        color: hsl(255, 80%, 70%);
    }
}

Compile into CSS code:

.xkd {
  color: #77ff33;
}
.xkd a {
  color: #9475f0;
}

Hsla() function

hsla()The function creates a color with hue, saturation, lightness, and alpha values.

Example:
.xkd{
    color: hsla(100, 100%, 60%, 0.8);
    a{
        color: hsla(255, 80%, 70%, 0.3);
    }
}

Compile into CSS code:

.xkd {
  color: rgba(119, 255, 51, 0.8);
}
.xkd a {
  color: rgba(148, 117, 240, 0.3);
}

Red() function

red()The function is used to obtain the red value from a color. The value range is 0 to 255. exceptred()Functions, andgreen()Function sumblue()Function.

Example:

For example, get the red value, green value and blue value in a color:

.xkd{
    content: red(#fecefc);
    content: green(#fecefc);
    content: blue(#fecefc);
}

Compile into CSS code:

.xkd {
  content: 254;
  content: 206;
  content: 252;
}

In the above code,red()The function is used to obtain the red value from a color. Similarly,green()Function to get the green value,blue()Function to get the blue value.

We can try it inrgb()Use these three obtained values in the function to see if the created color is the same#fecefcSame:

rgb(254, 206, 252)

Lightness() function

lightness()Function to obtain the brightness value of a color, with a value range of 0% to 100%.

Example:

For example, get the brightness of different color values:

.xkd{
    content:lightness(#cccccc);
    content:lightness(#ff0000);
}

Compile into CSS code:

.xkd {
  content: 80%;
  content: 50%;
}

According to the output results,#ccccccThe brightness of the color is80%#ff0000The brightness of is50%

Alpha() function

alpha()Function sets the value of the coloralphaThe channel returns a number between 0 and 1.

Example:
.xkd{
    content:alpha(pink);
    content:alpha(rgba(125, 125, 125, 0.6));
}

Compile into CSS code:

.xkd {
  content: 1;
  content: 0.6;
}

Opacity() function

opacity()The function is used to obtain the color transparency value, with the value range from 0 to 1.

Example:
.xkd{
    content:opacity(rgba(212, 234, 124, 0.1));
    content: opacity(red);
}

Compile into CSS code:

.xkd {
  content: 0.1;
  content: 1;
}

Mix() function

mix()Function is used to mix two colors to form a new color value.

Example:

For example, we mix blue and green:

.xkd{
    content:mix(blue, green);
}

Compile into CSS code:

.xkd {
  content: #004080;
}

After compilation, a new color is formed#004080

Fade in() function

fade-in()Function to reduce the transparency of the color. The value is between 0 and 1.

Example:
.xkd{
    content:fade-in(rgba(100, 100, 255, 0.7), 0.1);
}

Compile into CSS code:

.xkd {
  content: rgba(100, 100, 255, 0.8);
}

It can be seen that in the compiled code, the transparency is changed from the original0.7Become0.8。 Because the smaller the value, the higher the transparency. Conversely, the larger the value, the lower the transparency.

Fade out() function

fade-out()Function to increase the transparency of a color, with a value between 0 and 1.

Example:
.xkd{
    content:fade-out(rgba(100, 100, 255, 0.7), 0.1);
}

Compile into CSS code:

.xkd {
  content: rgba(100, 100, 255, 0.6);
}

In the above code, transparency is determined by0.7Upgrade to0.6, the smaller the value, the more transparent it is.