-
Opacity函数-transparentize()、 fade-out()函数 transparentize() 和 fade-out() 函数所起作用刚好与 opacify() 和 fade-in() 函数相反，让颜色更加的透明。这两个函数会让透明值做减法运算，当计算出来的结果小于 0 时会以 0 计算，表示全透明。 >> transparentize(red,.5) rgba(255, 0, 0, 0.5) >> transparentize(#fde,.9) rgba(255, 221, 238, 0.1) >> transparentize(rgba(98,233,124,.3),.11) rgba(98, 233, 124, 0.19) >> transparentize(rgba(98,233,124,.3),.51) rgba(98, 233, 124, 0) >> fade-out(red,.9) rgba(255, 0, 0, 0.1) >> fade-out(hsla(98,6%,23%,.5),.1) rgba(58, 62, 55, 0.4) >> fade-out(hsla(98,6%,23%,.5),.6) rgba(58, 62, 55, 0)查看全部
-
在 CSS 中除了可以使用 rgba、hsla 和 transform 来控制颜色透明度之外，还可以使用 opacity 来控制，只不过前两者只是针对颜色上的透明通道做处理，而后者是控制整个元素的透明度。 在 Sass 中，也提供了系列透明函数，只不过这系列的透明函数主要用来处理颜色透明度： alpha($color) /opacity($color)：获取颜色透明度值； rgba($color, $alpha)：改变颜色的透明度值； opacify($color, $amount) / fade-in($color, $amount)：使颜色更不透明； transparentize($color, $amount) / fade-out($color, $amount)：使颜色更加透明。查看全部
-
HSL函数-adjust-hue()函数 这个是通过调整颜色的色相换算一个新颜色。他需要一个颜色和色相度数值。通常这个度数值是在 -360deg 至 360deg 之间，当然了可以是百分数： //SCSS $baseColor: #ad141e; .adjust-hue-deg { background: adjust-hue($baseColor,30deg); } .adjust-hue-per { background: adjust-hue($baseColor,30%); } 编译出的 css 代码： //CSS .adjust-hue-deg { background: #ad5614; } .adjust-hue-per { background: #ad5614; } 同样的，可以通过 hue() 函数得到颜色转换前后的色相值： >> hue(#ad141e) //原颜色色相值 356.07843deg >> hue(#ad5614) //在原色色相基础上增加30deg 25.88235deg 在 HSL 颜色表达方式上，色相是从 -360 和 360 之间，负值逆时针转，正值顺时针转。在这个实例中，原色的色相值约 356deg，加上 30deg 后，新颜色变成了 386deg，但我们的色盘中并没有比 360deg 更大的值，此时新颜色的值也并不会是386deg，那将怎么办呢？其实很简单，当值大于 360deg时，表示色盘转完了一圈，继续顺时针转余下的值（这里是 26deg），那么这个继续转的值就是新颜色的色相值。小伙伴们，看到这个，你是不是又有点惊了。反之，得到的负数值也是一样的道理。查看全部
-
HSL函数-saturate() saturate()、desaturate()这两个函数是通过改变颜色的饱和度来得到一个新的颜色，他们和前面介绍的修改亮度得到新颜色的方法非常相似。 //SCSS $baseColor: #ad141e; .saturate { background: saturate($baseColor,30%); //在原色饱和度基础上增加饱和度 } .desaturate { background: desaturate($baseColor,30%);//在原色饱和度基础上减少饱和度 } 编译出来的 css 代码： //CSS .saturate { background: #c1000d; } .desaturate { background: #903137; } 颜色变了。同样使用 saturation() 函数在终端中进行计算一下，看看他们有什么样的变化： >> saturation(#ad141e) //原色的饱和度 79.27461% >> saturation(#c1000d) //在原色饱和度基础上增加30%,超过100%时按100%计算 100% >> saturation(#903137) //在原色饱和度基础上减少30%,小于0时按0计算 49.2228%查看全部
-
HSL函数-lighten() lighten() 和 darken() 两个函数都是围绕颜色的亮度值做调整的，其中 lighten() 函数会让颜色变得更亮，与之相反的 darken() 函数会让颜色变得更暗。这个亮度值可以是 0~1 之间，不过常用的一般都在 3%~20% 之间。 来看一个简单的实例，首先定义一个颜色变量： $baseColor: #ad141e; 使用 lighten() 和 darken() 函数来修改 10% 的亮度值： //SCSS .lighten { background: lighten($baseColor,10%); } .darken{ background: darken($baseColor,10%); } 编译出来的 css 代码： //CSS .lighten { background: #db1926; } .darken { background: #7f0f16; } 使用函数 lightness() 函数来验证一下三个颜色之间亮度值的变化： >> lightness(#ad141e) //原色的亮度值 37.84314% >> lightness(#db1926) //在原色的亮度值基础上增加10% 47.84314% >> lightness(#7f0f16) //在原色的亮度值基础上减少10% 27.84314% 当颜色的亮度值接近或大于 100%，颜色会变成白色；反之颜色的亮度值接近或小于 0 时，颜色会变成黑色。查看全部
-
HSL函数简介 HSL颜色函数包括哪些具体的函数，所起的作用是什么： hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色； hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色； hue($color)：从一个颜色中获取色相（hue）值； saturation($color)：从一个颜色中获取饱和度（saturation）值； lightness($color)：从一个颜色中获取亮度（lightness）值； adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色； lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色； darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色； saturate($color,$amount)：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色 desaturate($color,$amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色； grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%); complement($color)：返回一个补充色，相当于adjust-hue($color,180deg); invert($color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。 在 HSL 函数中，hsl() 和 hsla() 函数主要是通过颜色的 H、S、L 或者 A 几个参数获取一个 rgb 或 rgba 表达的颜色，使用这两个函数能帮助您知道颜色的十六进制表达式和 rgba 表达式。 而 hue()、saturation() 和 lightness() 函数主要是用来获取指定颜色中的色相值、饱和度和亮度值。对于颜色表达没有太多的实际作用。查看全部
-
RGB颜色函数-Mix()函数 Mix 函数是将两种颜色根据一定的比例混合在一起，生成另一种颜色。其使用语法如下： mix($color-1,$color-2,$weight); $color-1 和 $color-2 指的是你需要合并的颜色，颜色可以是任何表达式，也可以是颜色变量。 $weight 为 合并的比例（选择权重），默认值为 50%，其取值范围是 0~1 之间。它是每个 RGB 的百分比来衡量，当然透明度也会有一定的权重。默认的比例是 50%，这意味着两个颜色各占一半，如果指定的比例是 25%，这意味着第一个颜色所占比例为 25%，第二个颜色所占比例为75%。 mix(#f00, #00f) => #7f007f mix(#f00, #00f, 25%) => #3f00bf mix(rgba(255, 0, 0, 0.5), #00f) => rgba(63, 0, 191, 0.75) 在前面的基础上，做一个修改： //SCSS $color1: #a63; $color2: #fff; $bgColor1: #f36; $bgColor2: #e36; $borderColor1:#c36; $borderColor2:#b36; .mix { background: mix($bgColor1,$bgColor2,.75); color: mix($color1,$color2,.25); border-color: mix($borderColor1,$bgColor2,.05); } 编译的 css 代码： //CSS .mix { background: #ee3366; color: #fefefe; border-color: #ed33 } 这就是 Mix 函数的工作原理，在函数中指定三个函数，前两个函数是你想混合的颜色（记住，你可以通过颜色变量、十六进制、RGBA、RGB、HSL 或者 HSLA 颜色值）。第三个参数是第一种颜色的比例值。查看全部
-
RGB颜色函数-Red()、Green()、Blue()函数 3、Red() 函数 red() 函数非常简单，其主要用来获取一个颜色当中的红色值。假设有一个 #f36 的颜色，如果你想得到 #f36 中的 red 值是多少，这个时候使用 red() 函数就能很简单获取。 >> red(#f36) 255 得到的值是”255”。（注意：在命令终端要先输入sass -i 命令） 4、Green() 函数 green() 函数和 red() 函数一样，用来获取某一个颜色值中 green 的值。同样拿 ”#f36“ 颜色为例： >> green(#f36) 51 5、Blue() 函数 同理，blue() 函数是用来获取某一个颜色值中 blue 的值，如： >> blue(#f36) 102查看全部
-
RGB颜色函数-RGBA()函数 2、rgba() 函数主要用来将一个颜色根据透明度转换成 rgba 颜色。 语法有两种格式： rgba($red,$green,$blue,$alpha) //将一个rgba颜色转译出来，和未转译的值一样 rgba($color,$alpha) //将一个Hex颜色转换成rgba颜色 rgba($color,$alpha) 函数主要运用在这样的情形之中：假设在实际中知道的颜色值是 #f36 或者 red，但在使用中，需要给他们配上一个透明度，这个时候在原来的 CSS 中，首先需要通过制图工具，得到 #f36 或 red 颜色的 R、G、B 值，而不能直接使用（注意 css3 是可以的，但是存在浏览器兼容问题）： $color: #f36; $bgColor: orange; $borderColor:green; 同时给他们加上 .5 的透明度： //SCSS .rgba { color: rgba(#f36,.5); background: rgba(orange,.5); border-color: rgba(green,.5); } 语法：在括号是函数的参数，第一个参数是需要转换的颜色，他可以是任何颜色的表达方式，也可以是一个颜色变量；第二个参数是颜色的透明度，其值是 0~1 之间。 .rgba { color: rgba(255, 51, 102, 0.5); background: rgba(255, 165, 0, 0.5); border-color: rgba(0, 128, 0, 0.5); } 在来看一个调用前面定义的变量： //SCSS .rgba { color: rgba($color,.5); background: rgba($bgColor,.5); border-color: rgba($borderColor,.5); }查看全部
-
RGB颜色函数-RGB()颜色函数 主要分为 RGB , HSL 和 Opacity 三大函数，当然其还包括一些其他的颜色函数，比如说 adjust-color 和 change-color 等。 1、RGB颜色函数 RGB 颜色只是颜色中的一种表达式，其中 R 是 red 表示红色，G 是 green 表示绿色而 B 是 blue 表示蓝色。在 Sass 中为 RGB 颜色提供六种函数： rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色； rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色； red($color)：从一个颜色中获取其中红色值； green($color)：从一个颜色中获取其中绿色值； blue($color)：从一个颜色中获取其中蓝色值； mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。 sass -i 在命令终端开启这个命令，相当于开启 Sass 的函数计算。 $ sass -i >> rgb(200,40,88) //根据r:200,g:40,b:88计算出一个十六进制颜色值 #c82858 >> rgba(#c82858,.65) //根据#c82858的65%透明度计算出一个rgba颜色值 rgba(200, 40, 88, 0.65) >> red(#c82858) //从#c82858颜色值中得到红色值 200 200 >> green(#c82858) //从#c82858颜色值中得到绿色值 40 40 >> blue(#c82858) //从#c82858颜色值中得到蓝色值 88 88 >> mix(#c82858,rgba(200,40,80,.65),.3) //把#c82858和rgba(200,40,88,.65) 两颜色按比例混合得到一个新颜色 rgba(200, 40, 80, 0.65105)查看全部
-
Sass Maps的函数-map-remove($map,$key)、keywords($args) map-remove($map,$key) map-remove($map,$key) 函数是用来删除当前 $map 中的某一个 $key，从而得到一个新的 map。其返回的值还是一个 map。他并不能直接从一个 map 中删除另一个 map，仅能通过删除 map 中的某个 key 得到新 map。如： $map:map-remove($social-colors,dribble); 返回的是一个新 map: $map:( facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee ); 如果删除的 key 并不存在于 $map 中，那么 map-remove() 函数返回的新 map 和以前的 map 一样。 $map:map-remove($social-colors,weibo); 返回的值： $map: ( dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee ); keywords($args) keywords($args) keywords($args) 函数可以说是一个动态创建 map 的函数。可以通过混合宏或函数的参数变创建 map。参数也是成对出现，其中 $args 变成 key(会自动去掉$符号)，而 $args 对应的值就是value。 @mixin map($args...){ @debug keywords($args); } @include map( $dribble: #ea4c89, $facebook: #3b5998, $github: #171515, $google: #db4437, $twitter: #55acee ); 在命令终端可以看到一个输入的 @debug 信息：查看全部
-
Sass Maps的函数-map-values($map)、map-merge($map1,$map2) map-values($map) map-values($map) 函数类似于 map-keys($map) 功能，不同的是 map-values($map )获取的是 $map 的所有 value 值，可以说也将是一个列表。而且，map-values($map) 中如果有相同的 value 也将会全部获取出来。 $social-colors: ( dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee ); map-values($social-colors) 将会返回： #ea4c89,#3b5998,#171515,#db4437,#55acee 值与值之间同样用逗号分隔。 map-merge($map1,$map2) map-merge($map1,$map2) 函数是将 $map1 和 $map2 合并，然后得到一个新的 $map。如果你要快速将新的值插入到 $map 中的话，这种方法是最佳方法。假设我们有两个 $map: $color: ( text: #f36, link: #f63, border: #ddd, backround: #fff ); $typo:( font-size: 12px, line-height: 1.6 ); 如果希望将这两个 $map 合并成一个 map，我们只要这样做： $newmap: map-merge($color,$typo); 将会生成一个新的 map: $newmap:( text: #f36, link: #f63, border: #ddd, background: #fff, font-size: 12px, line-height: 1.6 ); 这样你就可以借助 map-get()等函数做其他事情了。 不过有一点需要注意，如果 $map1 和 $map2 中有相同的 $key 名，那么将 $map2 中的 $key 会取代 $map1 中的查看全部
-
Sass Maps的函数-map-keys($map) map-keys($map) 函数将会返回 $map 中的所有 key。这些值赋予给一个变量，那他就是一个列表。如： map-keys($social-colors); 其返回的值为： "dribble","facebook","github","google","twitter" 换句话说： $list: map-keys($social-colors); 相当于： $list:"dribble","facebook","github","google","twitter";查看全部
-
Sass Maps的函数-map-get($map,$key) map-get($map,$key) 函数的作用是根据 $key 参数，返回 $key 在 $map 中对应的 value 值。如果 $key 不存在 $map中，将返回 null 值。此函数包括两个参数： $map：定义好的 map。 $key：需要遍历的 key。 来看一个简单的示例，假设定义了一个 $social-colors 的 map: $social-colors: ( dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee ); 假设要获取 facebook 键值对应的值 #3b5998，我们就可以使用 map-get() 函数来实现： .btn-dribble{ color: map-get($social-colors,facebook); } 编译出来的CSS： .btn-dribble { color: #3b5998; } 我们来看另一种情况，假设 $social-colors 这个 map 没有 $weibo 这个 key: .btn-weibo{ font-size: 12px; color: map-get($social-colors,weibo); } 此时编译出来的是CSS： .btn-weibo { font-size: 12px; } 从 编译出来的 CSS 可以得知，如果 $key 不在 $map 中，不会编译出 CSS，其实在 Sass 中，map-get($social- colors,weibo) 返回了一个 null 值。但在编译出来的 CSS 中，你只知道他没有编译出样式，而且在命令终端编译时，也没有任何错误或者警告信息。说实话，你并不知道他为什么编译不出来样式，或者说他已返回了值为 null。体验不强，也不好排错。其实如果我们自定义一个函数，另外加个判断，那就截然不同。查看全部
-
Sass Maps的函数 前面介绍了使用 map 来管理变量，但要在 Sass 中获取变量，或者对 map 做更多有意义的操作，我们必须借助于 map 的函数功能。在 Sass 中 map 自身带了七个函数： map-get($map,$key)：根据给定的key值，返回map中相关的值。 map-merge($map1,$map2)：将两个map合并成一个新的map。 map-remove($map,$key)：从map中删除一个key，返回一个新map。 map-keys($map)：返回map中所有的key。 map-values($map)：返回map中所有的value。 map-has-key($map,$key)：根据给定的key值判断map是否有对应的value值，如果有返回true，否则返回false。 keywords($args)：返回一个函数的参数，这个参数可以动态的设置key和value。查看全部
举报
0/150
提交
取消