-
a. 在 CSS 中除了可以使用 rgba、hsla 和 transform 来控制颜色透明度之外，还可以使用 opacity 来控制，只不过前两者只是针对颜色上的透明通道做处理，而后者是控制整个元素的透明度。 b. 在 Sass 中，也提供了系列透明函数，只不过这系列的透明函数主要用来处理颜色透明度： alpha($color) /opacity($color)：获取颜色透明度值； rgba($color, $alpha)：改变颜色的透明度值； opacify($color, $amount) / fade-in($color, $amount)：使颜色更不透明； transparentize($color, $amount) / fade-out($color, $amount)：使颜色更加透明。查看全部
-
a. 这个函数会颜色的饱和度值直接调至 0%，所以此函数与 desaturate($color,100%) 所起的功能是一样的。一般这个函数能将彩色颜色转换成不同程度的灰色。 grayscale() 函数处理过的颜色，其最大的特征就是颜色的饱和度为 0。查看全部
-
a. 这个是通过调整颜色的色相换算一个新颜色。他需要一个颜色和色相度数值。通常这个度数值是在 -360deg 至 360deg 之间，当然了可以是百分数，也可以是纯数字（都表示多少度！这里不要被百分号混淆了） //SCSS $baseColor: #ad141e; .adjust-hue-deg { background: adjust-hue($baseColor, 30deg); } .adjust-hue-per { background: adjust-hue($baseColor, 30%); } .adjust-hue-num { background: adjust-hue($baseColor, 30); } b. HSL的色盘参考：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201503281590.html c. 让按钮的边框色是根据背景颜色调整色相值30deg获得： $bgcolor: #f46; .btn{ background-color: $bgcolor; border-color: adjust-hue($color: $bgcolor, $degrees: 30); }查看全部
-
a. 这两个函数是通过改变颜色的饱和度来得到一个新的颜色，他们和前面介绍的修改亮度得到新颜色的方法非常相似。 b. 让按钮边框色是背景颜色的基础上饱和度增加20%： $bgcolor: #ff3; .btn { background-color: $bgcolor; border-color:saturate($bgcolor, $amount: 20%); }查看全部
-
a. 两个函数都是围绕颜色的亮度值做调整的，其中 lighten() 函数会让颜色变得更亮，与之相反的 darken() 函数会让颜色变得更暗。 b. lighten() 和 darken() 函数只是在原始颜色的基础上对亮度值进行运算操作，但是生成出来的新颜色在色相和饱和度会有略微的变化。 c. lighten() 函数会让新颜色的亮度值超过 100%，而 darken() 函数会让新颜色的亮度值低于 0 变成负数。可实际上任何颜色的亮度值都在 0~100% 之间，当颜色的亮度值接近或大于 100%，颜色会变成白色；反之颜色的亮度值接近或小于 0 时，颜色会变成黑色。 d. 让按钮的边框颜色是背景色亮度的10%： $bgcolor: #f33; .btn { background-color: $bgcolor; border-color: darken($bgcolor, 0.9*lightness($bgcolor)); }查看全部
-
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)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。查看全部
-
Mix 函数的工作原理，在函数中指定三个函数，前两个函数是你想混合的颜色（记住，你可以通过颜色变量、十六进制、RGBA、RGB、HSL 或者 HSLA 颜色值）。第三个参数是第一种颜色的比例值。查看全部
-
RGB颜色函数-Red()、Green()、Blue()函数，分别获取颜色中的红色值、绿色值、蓝色值。 $color: #f36; .body { @if red($color) > 50 { color: #fff; } @else if red($color) < 50 { color:#000; } }查看全部
-
rgba() 函数主要用来将一个颜色根据透明度转换成 rgba 颜色。查看全部
-
sass -i：在命令终端开启此命令，相当于开启Sass的函数计算。 在 RGB 颜色函数中，在实际中常用的主要是 rgba() 和 mix() 两个函数。查看全部
-
map-remove($map,$key) 函数是用来删除当前 $map 中的某一个 $key，从而得到一个新的 map。其返回的值还是一个 map。他并不能直接从一个 map 中删除另一个 map，仅能通过删除 map 中的某个 key 得到新 map。 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 );查看全部
-
map-merge($map1,$map2) 函数是将 $map1 和 $map2 合并，然后得到一个新的 $map。如果你要快速将新的值插入到 $map 中的话，这种方法是最佳方法。如果 $map1 和 $map2 中有相同的 $key 名，那么将 $map2 中的 $key 会取代 $map1 中的。查看全部
-
28. map-keys($map) 函数将会返回 $map 中的所有 key。这些值赋予给一个变量，那他就是一个列表。 $social-colors: ( dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee ); @function colors($color){ $names: map-keys($social-colors); @if not index($names,$color){ @warn "Waring: `#{$color} is not a valid color name.`"; } @return map-get($social-colors,$color); } @each $name in map-keys($map: $social-colors){ .btn-#{$name}{ color:colors($name); } } @for $i from 1 through length(map-keys($social-colors)){ .btn-#{nth(map-keys($social-colors),$i)}{ color: colors(nth(map-keys($social-colors),$i)); } }查看全部
-
27. map-has-key($map,$key) 函数将返回一个布尔值。当 $map 中有这个 $key，则函数返回 true，否则返回 false。 $social-colors: ( dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee ); @function colors($color){ @if not map-has-key($social-colors,$color){ @warn "No color found for `#{$color}` in $social-colors map. Property omitted."; } @return map-get($social-colors,$color); } @each $social-network,$social-color in $social-colors { .btn-#{$social-network} { color: colors($social-network); } }查看全部
-
map-get($map,$key) 函数的作用是根据 $key 参数，返回 $key 在 $map 中对应的 value 值。如果 $key 不存在 $map中，将返回 null 值。查看全部
举报
0/150
提交
取消