正文

scssscss色彩控制(代码片段)

author  author  2023-01-16  595

关键词：

/* Define color */
$base-color: #AD141E;

/*
Darken & Lighten

These two adjust the Lightness of the color’s HSL values. Sass will parse our hex color variable to hsl, then make the adjustments. You call them on the color with a percentage value between 0 and 100. I usually stay in the range of 3-20%.
*/

darken( $base-color, 10% )
lighten( $base-color, 10% )


/*
Saturate, & Desaturate 

These will will adjust the Saturation of the colors HSL values, much like Darken and Lighten adjusted the Lightness. Again, you need to give a percentage value to saturate and desaturate. 
*/
saturate( $base-color, 20% )
desaturate( $base-color, 20% )

/*
https://robots.thoughtbot.com/controlling-color-with-sass-color-functions#saturate-amp-desaturate
*/

/*
Adjust-hue

This adjusts the hue value of HSL the same way all of the others do. Again, it takes a percentage value for the change.
*/
adjust-hue( $base-color, 20% )


/*
Adding Alpha Transparency

Using our hex color we can do a few things to get it to be a little transparent. We can call hsla, rgba, opacify, and transparentize. All of them accomplish the same thing, just in different ways. I stick to rgba as it comes most naturally to me which takes a color and a value from 0 to 1 for the alpha.
*/
rgba( $base-color, .7 )


/*
Tint & Shade

Our very own Phil LaPier has added to those base color functions. Both of these are accessible in Bourbon. They mix your color with a value of white (tint) and black (shade) and are similar to Darken and Lighten. They take the color and a % value for the change.
*/
tint( $base-color, 10% )
shade( $base-color, 10% )


/*
Getting more advanced

Once you have those down and you are looking for more control you can look into some more advanced color control with adjust-color, scale-color, change-color. These are for multiple changes in one color function. You can easily lighten the color and add some transparency all in one.

Some of the best places to use these color functions are for gradients, borders and shadows. When you need a slightly darker border and a slightly lighter inset shadow just adjust a color variable and let Sass do the rest for you. Buttons provide the perfect place to test out the functions. Check out some of the functions used on the thoughtbot buttons:
*/
border: 1px solid darken($base-color, 20%);
text-shadow: 0 -1px 0 darken($base-color, 10%);
@include box-shadow(inset 0 1px 0 lighten($base-color, 20%));

正文

scssscss色彩控制(代码片段)

scssscss代码(代码片段)

scssscss(代码片段)

scssscss褪色(代码片段)

scssscss助手(代码片段)

scssscss搜索(代码片段)

scssscss地图(代码片段)

scssscss-基础(代码片段)

scssscss变量(代码片段)

scssscss-移动菜单(代码片段)

scssscss配置组件(代码片段)

scssscss：角度面具(代码片段)

scssscss：mixinclearfix(代码片段)

scssscssネスト(代码片段)

scssscss：wrappermixin(代码片段)

scssscss响应断点(代码片段)

scssscss三角混合(代码片段)

scssscss：图像亮度淡入(代码片段)

scssscss记录器(代码片段)