sass 方法

心已赠人 2022-05-30 02:57 92阅读 0赞

官方地址[http://sass-lang.com/documentation/Sass/Script/Functions.html][http_sass-lang.com_documentation_Sass_Script_Functions.html]  
方法的使用示例：

$color: hsl(120deg, 100%, 50%)

接下来是各个方法的描述：  
RGB function RGB方法

rgb($red, $green, $blue) //红绿蓝三原色 rgb颜色方法
    rgba($red, $green, $blue, $alpha) rgba颜色方法
    red($color) ://获取一个颜色中红色的值(rgb类型的值)
    
    green($color) : //获取一个颜色中绿色的值(rgb类型的值)
    
    blue($color) ://获取一个颜色中蓝色的值(rgb类型的值)
    mix($color1, $color2, [$weight]) : 获取两种颜色的混合值，$weight：混合比例0-100，值越大第一种颜色的比例越多，默认值50

HSL Functions HSL颜色

hsl($hue, $saturation, $lightness) :色相（0-359）、饱和度、亮度（0-1）
    hsla($hue, $saturation, $lightness, $alpha) //同上，多了个透明度
    hue($color) ://获取hsl中的 色相
    saturation($color) ://获取hsl中的 饱和度
    lightness($color) : //获取hsl中的 亮度
    adjust-hue($color, $degrees) ://调整hsl色相0为不调整，可以为 正无穷或负无穷
    lighten($color, $amount) : //调整亮度0-1
    
    darken($color, $amount) : //调整亮度0-1
    
    saturate($color, $amount) : //调整颜色的 饱和度
    
    desaturate($color, $amount) : //调整颜色的 饱和度
    
    grayscale($color) : Converts a color to grayscale.//提取灰度
    
    complement($color) : Returns the complement of a color.//对颜色进行一定的补充
    
    invert($color, [$weight]) : Returns the inverse of a color.//颜色翻转

Opacity Functions 透明度

alpha($color) / opacity($color) : //获取透明度
    
    rgba($color, $alpha) : //调整透明度
    
    opacify($color, $amount) / fade-in($color, $amount) : //使颜色变得不透明
    
    transparentize($color, $amount) / fade-out($color, $amount) : //使颜色变得更透明

Other Color Functions

adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) : Increases or decreases one or more components of a color.//调整颜色值
    
    scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]) : Fluidly scales one or more properties of a color.//批量调整颜色属性
    
    change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]) : Changes one or more properties of a color.//变更颜色属性
    
    ie-hex-str($color) : Converts a color into the format understood by IE filters.//转换成ie颜色

[http_sass-lang.com_documentation_Sass_Script_Functions.html]: http://sass-lang.com/documentation/Sass/Script/Functions.html