为了账号安全,请及时绑定邮箱和手机立即绑定
  • 在 CSS 中除了可以使用 rgba、hsla 和 transform 来控制颜色透明度之外,还可以使用 opacity 来控制,只不过前两者只是针对颜色上的透明通道做处理,而后者是控制整个元素的透明度。
  • Mix 函数是将两种颜色根据一定的比例混合在一起,生成另一种颜色: mix($color-1,$color-2,$weight); $weight 为 合并的比例(选择权重),默认值为 50%,其取值范围是 0~1 之间。它是每个 RGB 的百分比来衡量,当然透明度也会有一定的权重。默认的比例是 50%,这意味着两个颜色各占一半,如果指定的比例是 25%,这意味着第一个颜色所占比例为 25%,第二个颜色所占比例为75%。 可以通过颜色变量、十六进制、RGBA、RGB、HSL 或者 HSLA 颜色值
  • sass -i 在命令终端开启这个命令,相当于开启 Sass 的函数计算,e.g: $ sass -i >> rgb(200,40,88) //根据r:200,g:40,b:88计算出一个十六进制颜色值 #c82858
  • rgba() 函数主要用来将一个颜色根据透明度转换成 rgba 颜色。 其语法有两种格式: rgba($red,$green,$blue,$alpha) //将一个rgba颜色转译出来,和未转译的值一样 rgba($color,$alpha) //将一个Hex颜色转换成rgba颜色
  • rgb($red,$green,$blue):根据红、绿、蓝三个值创建一个颜色; rgba($red,$green,$blue,$alpha):根据红、绿、蓝和透明度值创建一个颜色; red($color):从一个颜色中获取其中红色值; green($color):从一个颜色中获取其中绿色值; blue($color):从一个颜色中获取其中蓝色值; mix($color-1,$color-2,[$weight]):把两种颜色混合在一起。
  • map-remove($map,$key) 函数是用来删除当前 $map 中的某一个 $key,从而得到一个新的 map。其返回的值还是一个 map。他并不能直接从一个 map 中删除另一个 map,仅能通过删除 map 中的某个 key 得到新 map。 如果删除的 key 并不存在于 $map 中,那么 map-remove() 函数返回的新 map 和以前的 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-values($map) 函数类似于 map-keys($map) 功能,不同的是 map-values($map )获取的是 $map 的所有 value 值,可以说也将是一个列表。而且,map-values($map) 中如果有相同的 value 也将会全部获取出来。值与值之前同样用逗号分隔。 map-merge($map1,$map2) 函数是将 $map1 和 $map2 合并,然后得到一个新的 $map。如果你要快速将新的值插入到 $map 中的话,这种方法是最佳方法。 $newmap: map-merge($color,$typo); 如果 $map1 和 $map2 中有相同的 $key 名,那么将 $map2 中的 $key 会取代 $map1 中的.
  • map-keys($map) 函数将会返回 $map 中的所有 key。这些值赋予给一个变量,那他就是一个列表: $list: map-keys($social-colors);
  • @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 值。 e.g.: .btn-dribble{ color: map-get($social-colors,facebook); } 如果 $key 不在 $map 中,不会编译出 CSS,其实在 Sass 中,map-get($social- colors,weibo) 返回了一个 null 值.
  • 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。
  • Sass 的 map 常常被称为数据地图,也有人称其为数组,因为他总是以 key:value 成对的出现,但其更像是一个 JSON 数据。 Sass 的 map 长得与 JSON 极其相似: $map: ( $key1: value1, $key2: value2, $key3: value3 ) 换皮肤的项目,可能每一套皮肤对应的颜色蛮多的,那么使用此功能来管理颜色的变量就非常的有条理性,便于维护与管理: $theme-color: ( default: ( bgcolor: #fff, text-color: #444, link-color: #39f ), primary:( bgcolor: #000, text-color:#fff, link-color: #93f ), negative: ( bgcolor: #f36, text-color: #fefefe, link-color: #d4e ) );
  • 在这里把 Miscellaneous 函数称为三元条件函数,主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值,当条件成立返回一种值,当条件不成立时返回另一种值: if($condition,$if-true,$if-false)
  • comparable() 函数主要是用来判断两个数是否可以进行“加,减”以及“合并”。如果可以返回的值为 true,如果不可以返回的值是 false
  • unitless() 函数相对来说简单明了些,只是用来判断一个值是否带有单位,如果不带单位返回的值为 true,带单位返回的值为 false

举报

0/150
提交
取消
课程须知
对CSS有一定的了解,以及最好是学习完成《sass基础篇》课程,才可以更好的学习本课程。
老师告诉你能学到什么?
1、Sass 的控制命令 2、Sass 的函数功能 3、Sass 的函数的 @ 规则
意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!