Sass-färgfunktioner

Sass-färgfunktioner

Vi delar upp Sass-färgfunktioner i tre delar: inställningsfunktioner, hämtningfunktioner och manipulationsfunktioner för färger:

Sass-färgfunktioner

Sass-funktioner för att hantera färger Funktion
rgb(rött, grönt, blått)

Ställ in färg med hjälp av Red-Green-Blue (RGB)-modellen
Specificera RGB-färgvärden genom att använda rgb(red, green, blue)
Varje parameter definierar styrkan för färgen, vilket kan vara ett heltal mellan 0 och 255 eller en procentsats (från 0% till 100%)

Exempel:

rgb(0, 0, 255);
// Visas som blått, eftersom blue-argumentet är satt till sitt högsta värde (255), medan andra parametrar är inställda till 0
rgba(rött, grönt, blått, alpha)

Set the color using the Red-Green-Blue-Alpha (RGBA) model.
RGBA color values are an extension of RGB color values with an alpha channel - the channel specifies the opacity of the color.
alpha The parameter is a number between 0.0 (completely transparent) and 1.0 (completely opaque).

Exempel:

rgba(0, 0, 255, 0.3); // Blue with transparency
hsl(nyans, färgmängd, ljushet)

Set the color using the Hue-Saturation-Lightness model - and represents the cylindrical coordinate representation of the color.
Hue (hue) is the degree on the color wheel (from 0 to 360) - 0 or 360 is red, 120 is green, 240 is blue
Saturation (saturation) is a percentage value; 0% represents gray shadow, 100% represents full color.
Lightness (brightness) is also a percentage; 0% is black, 100% is white.

Exempel:

hsl(120, 100%, 50%); // Green
hsl(120, 100%, 75%); // Light green
hsl(120, 100%, 25%); // Dark green
hsl(120, 60%, 70%); // Light green

hsla(nyans, färgmängd, ljushet, alpha)

Set the color using the Hue-Saturation-Lightness-Alpha (HSLA) model.
HSLA color values are an extension of HSL color values, with an alpha channel - specifying the opacity of the color.
alpha The parameter is a number between 0.0 (completely transparent) and 1.0 (completely opaque).

Exempel:

hsl(120, 100%, 50%, 0.3); // Green with opacity
hsl(120, 100%, 75%, 0.3); // Light green with opacity

grayscale(color)

Set the gray with the same brightness as the color.

Exempel:

grayscale(#7fffd4);

Result: #c6c6c6
complement(color)

Set the complementary color of the color.

Exempel:

complement(#7fffd4);

Result: #ff7faa
invert(color, Skapa en blandning av färg 1 och färg 2.)

Set the inverse or negative color of the color.
Skapa en blandning av färg 1 och färg 2.The parameter is optional and must be a number between 0% and 100%. The default value is 100%.

Exempel:

invert(white);

Result: black

Sass color function

Sass-funktioner för att hantera färger Funktion
red(color)

Return the red value of the color with a number between 0 and 255.

Exempel:

red(#7fffd4);

Result: 127

red(red);

blue(blue);
green(color)

Return the green value of the color with a number between 0 and 255.

Exempel:

green(#7fffd4);

blue(blue);

green(blue);

green(blue);
Resultat: 0color)

blue(

Exempel:

Returnerar ett nummer mellan 0 och 255 för färgens blått.

blue(#7fffd4);

Resultat: 212

blue(blue);
Resultat: 255color)

nyans(

Exempel:

Returnerar ett nummer mellan 0deg och 360deg för färgens nyans.

nyans(#7fffd4);
Resultat: 160degcolor)

färgmängd(

Exempel:

Returnerar ett nummer mellan 0% och 100% i form av en HSL färgmängd.

färgmängd(#7fffd4);
Resultat: 100%color)

ljushet(

Exempel:

Returnerar ett nummer mellan 0% och 100% i form av en HSL ljushet.

ljushet(#7fffd4);
Resultat: 74.9%color)

opacity(

Exempel:

alpha(

alpha(#7fffd4);
Resultat: 1color)

opacity(

Exempel:

Returnerar ett nummer mellan 0 och 1 för färgens alpha-kanal.

opacity(rgba(127, 255, 212, 0.5));

Resultat: 0.5

Sass-funktioner för att hantera färger Funktion
Beskrivning och exempelstörre vikt innebär att mer, color2, Skapa en blandning av färg 1 och färg 2.)

mix(
Skapa en blandning av färg 1 och färg 2. vikt
parametrarna måste vara mellan 0% och 100%. Standardvärdet är 50%. större vikt innebär att mer。
Mindre vikt innebär att mer color2。

adjust-hue(color, grader)

Justera färgens nyans med -360 till 360 grader.

Exempel:

adjust-hue(#7fffd4, 80deg);

Resultat: #8080ff
adjust-color(color, rött, grönt, blått, nyans, färgmängd, ljushet, alpha)

Justera en eller flera parametrar med angiven mängd.
Denna funktion lägger till eller subtracterar angivna mängder till befintliga färgvärden.

Exempel:

adjust-color(#7fffd4, blått: 25);

Resultat:
change-color(color, rött, grönt, blått, nyans, färgmängd, ljushet, alpha)

Sätt en eller flera färgparametrar till nya värden.

Exempel:

change-color(#7fffd4, rött: 255);

Resultat: #ffffd4
scale-color(color, rött, grönt, blått, färgmängd, ljushet, alpha) Skala en eller flera färgparametrar.
rgba(färg, alpha)

Skapa en ny färg med hjälp av den angivna alpha-kanalen.

Exempel:

rgba(#7fffd4, 30%);

Resultat: rgba(127, 255, 212, 0.3)
lighten(color, amount) Skapa ljusare färger med ett värde mellan 0% och 100%.
amount Öka HSL-brightnessen i procent.
darken(color, amount) Skapa djupare färger med ett värde mellan 0% och 100%.
amount Minska HSL-brightnessen i procent.
saturate(color, amount) Skapa mer färgrika färger med ett värde mellan 0% och 100%.
amount Öka HSL-saturationen i procent.
desaturate(color, amount) Skapa färger med lägre saturation med ett värde mellan 0% och 100%.
amount Minska HSL-saturationen i procent.
opacify(color, amount) Skapa mindre genomskinliga färger med ett värde mellan 0 och 1.
amount Parametrarna ökas i alpha-kanalen enligt deras värde.
fade-in(color, amount) Skapa mindre genomskinliga färger med ett värde mellan 0 och 1.
amount Parametrarna minskas i alpha-kanalen enligt deras värde.
transparentize(color, amount) Skapa mer genomskinliga färger med ett värde mellan 0 och 1.
amount Parametrarna minskas i alpha-kanalen enligt deras värde.
fade-out(color, amount) Skapa mer genomskinliga färger med ett värde mellan 0 och 1.
amount Parametrarna ökas i alpha-kanalen enligt deras värde.