Sass function-color function-RGB color function, sass-rgb

Sass function-color function-RGB color function, sass-rgb

RGB color function-RGB () color Function

Mainly dividedRGB,HSLAndOpacityThree major functions, of course, include some other color functions, such as adjust-color and change-color.
1. RGB color Function
RGB color is only an expression in the color. R indicates red, G indicates green, and B Indicates blue. Provides six functions for RGB colors in Sass:

• Rgb ($ red, $ green, $ blue): Creates a color based on the values of red, green, and blue;
• Rgba ($ red, $ green, $ blue, $ alpha): Creates a color based on the values of red, green, blue, and transparency;
• Red ($ color): obtains the red value from a color;
• Green ($ color): Obtain the green value from a color;
• Blue ($ color): gets the blue value from a color;
• Mix ($ color-1, $ color-2, [$ weight]): combines the two colors.

1 sass-I 2 // enable this command on the command terminal, which is equivalent to enabling Sass function compute. 3 $ sass-I 4> rgb (200, 40, 88) // according to r:, g: 40, B: 88 calculate a hexadecimal color value 5 # c82858 6> rgba (# c82858 ,. 65) // calculate an rgba color value 7 rgba (65%, 40, 88, 200) based on the 0.65 transparency of # c82858. 8> red (# c82858) // obtain the red value from the # c82858 color value 200 9 20010> green (# c82858) // obtain the green value 4011 4012 from the # c82858 color value> blue (# c82858) // obtain the blue value 8813 8814 from the # c82858 color value> mix (# c82858, rgba (200,40, 80 ,. 65 ),. 3) // set # c82858 and rgba (, 40, 88 ,. 65) the two colors are mixed proportionally to obtain a new color of 15 rgba (200, 40, 80, 0.65105)

 

 

 

 

2. The rgba () function is used to convert a color into an rgba color based on its transparency.
There are two syntax formats:

Rgba ($ red, $ green, $ blue, $ alpha) // translate an rgba color, which is the same as the untranslated value rgba ($ color, $ alpha) // convert a Hex color to rgba color

Rgba ($ color, $ alpha)The function is mainly used in this situation: assume that the color value we know in reality is # f36 or red, but in use, we need to provide them with a transparency, in the original CSS, you must first obtain the R, G, and B values of the # f36 or red color through the drawing tool, instead of using them directly (note that css3 is acceptable, but there is a browser compatibility problem ):

1 $color: #f36;2 $bgColor: orange;3 $borderColor:green;

Add them. 5Transparency:

1 //SCSS2 .rgba {3 color: rgba(#f36,.5);4 background: rgba(orange,.5);5 border-color: rgba(green,.5);6 }

Syntax:It is a function parameter in parentheses,First ParameterNumber is requiredConverted colorIt can be an expression of any color or a color variable;Second ParameterYesColor transparencyThe value is0 ~ 1.

1 .rgba {2     color: rgba(255, 51, 102, 0.5);3     background: rgba(255, 165, 0, 0.5);4     border-color: rgba(0, 128, 0, 0.5);5 }

Call the variables defined earlier:

1 //SCSS2 .rgba {3     color: rgba($color,.5);4     background: rgba($bgColor,.5);5     border-color: rgba($borderColor,.5);6 }

Convert the primary color to another color:

 

 

3. Red () function
Red ()Function, which is mainly used to obtain the red value in a color. Suppose there is a # f36 color. If you want to get the value of red in # f36, useRed () functionIt is easy to get.

>> red(#f36)255

The value is "255 ". (Note: In the command terminal, enter the sass-I command first)

 

4. Green () function
Green ()Functions andRed ()The same function is used to obtain the green value in a color value. Take the "# f36" color as an example:

>> green(#f36)51

 

 

5. Blue () Functions
Similarly, the blue () function is used to obtain the blue value in a color value, for example:

>> blue(#f36)102

 

 

 

RGB color function-Mix () function
MixThe function is to combine the two colors according to a certain proportion to generate another color. The syntax is as follows:

mix($color-1,$color-2,$weight);

$ Color-1And$ Color-2It refers to the color you need to merge. The color can be any expression or color variable.
$ WeightIs the merged proportion (weight options). The default value is 50%, and the value range is 0 ~ Between 1. It is measured by the percentage of each RGB. Of course, transparency also has a certain weight. The default proportion is 50%, which means that the two colors each account for half. If the specified proportion is 25%, this means that the proportion of the first color is 25%, and the proportion of the second color is 75%.

1 mix(#f00, #00f) => #7f007f2 mix(#f00, #00f, 25%) => #3f00bf3 mix(rgba(255, 0, 0, 0.5), #00f) => rgba(63, 0, 191, 0.75)

On the basis of the above, make a modification:

 1 //SCSS 2 $color1: #a63; 3 $color2: #fff; 4 $bgColor1: #f36; 5 $bgColor2: #e36; 6 $borderColor1:#c36; 7 $borderColor2:#b36; 8 .mix { 9     background: mix($bgColor1,$bgColor2,.75);10     color: mix($color1,$color2,.25);11     border-color: mix($borderColor1,$bgColor2,.05);12 }

Compiled css code:

1 //CSS2 .mix {3     background: #ee3366;4     color: #fefefe;5     border-color: #ed336 }

This is how the Mix function works. Specify three functions in the function. The first two functions are the colors you want to Mix (Remember, you can use color variables, hexadecimal, RGBA, RGB, HSL, or HSLA color values ). The third parameter is the proportional value of the first color.