为了账号安全,请及时绑定邮箱和手机立即绑定
  • 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
提交
取消
课程须知
对CSS有一定的了解,以及最好是学习完成《sass基础篇》课程,才可以更好的学习本课程。
老师告诉你能学到什么?
1、Sass 的控制命令 2、Sass 的函数功能 3、Sass 的函数的 @ 规则
意见反馈 帮助中心 APP下载
官方微信