为了账号安全,请及时绑定邮箱和手机立即绑定
  • 上面的例子说明了一切问题。当颜色的亮度值接近或大于 100%,颜色会变成白色;反之颜色的亮度值接近或小于 0 时,颜色会变成黑色。
  • Miscellaneous函数 在这里把 Miscellaneous 函数称为三元条件函数,主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值,当条件成立返回一种值,当条件不成立时返回另一种值: if($condition,$if-true,$if-false) 上面表达式的意思是当 $condition 条件成立时,返回的值为 $if-true,否则返回的是 $if-false 值。 >> if(true,1px,2px) 1px >> if(false,1px,2px) 2px
  • 将引入 rounded-corners 和 text-shadow 两个文件。 如果你有一个 SCSS 或 Sass 文件需要引入, 但是你又不希望它被编译为一个 CSS 文件, 这时,你就可以在文件名前面加一个下划线,就能避免被编译。 这将告诉 Sass 不要把它编译成 CSS 文件。 然后,你就可以像往常一样引入这个文件了,而且还可以省略掉文件名前面的下划线。 例如,你有一个文件叫做 _colors.scss。 这样就不会生成 _colors.css 文件了, 而且你还可以这样做: @import "colors";//不用加下划线 来引入 _colors.scss 文件。
  • @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); }
  • $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); } .btn-dribble { color: colors(dribble); }
  • append() 函数是用来将某个值插入到列表中,并且处于最末位。 >> append(10px 20px ,30px) (10px 20px 30px) >> append((10px,20px),30px) (10px, 20px, 30px) >> append(green,red) (#008000 #ff0000) >> append(red,(green,blue)) (#ff0000 (#008000, #0000ff)) 如果没有明确的指定 $separator 参数值,其默认值是 auto。 如果列表只有一个列表项时,那么插入进来的值将和原来的值会以空格的方式分隔。 如果列表中列表项是以空格分隔列表项,那么插入进来的列表项也将以空格分隔; 如果列表中列表项是以逗号分隔列表项,那么插入进来的列表项也将以逗号分隔。 当然,在 append() 函数中,可以显示的设置 $separator 参数, 如果取值为 comma 将会以逗号分隔列表项 如果取值为 space 将会以空格分隔列表项 >> append((blue green),red,comma) (#0000ff, #008000, #ff0000) >> append((blue green),red,space) (#0000ff #008000 #ff0000) >> append((blue, green),red,comma) (#0000ff, #008000, #ff0000) >> append((blue, green),red,space) (#0000ff #008000 #ff0000) >> append(blue,red,comma) (#0000ff, #ff0000) >> append(blue,red,space) (#0000ff #ff0000)
  • @min blockHidden($boolean:true){ @if $boolean { @debug "$boolean is #{$boolean}" display:block; }@else { @debug "$boolean is #{$boolean}" display:none; } } .block { @inlude blockHidden; } .hidden{ @inlude blockHidden(false); }
  • mix($color-1,$color-2,[$weight]):mix($color-1,$color-2, 25%) =>这意味着第一个颜色所占比例为25%,第二个颜色所占比例为75%,将两个颜色混合.$weight合并的比例,默认值为50%,其取值范围是0~1之间。
  • append():在列表末尾插入【某个】值(注意是插一个),分隔符也可以是space或comma,可显示指定。如果没有指定,当列表只有一个列表项时,用【空格】分隔,否则,按列表项的分隔符分隔。 特殊的举例: append(red,(green,blue)) >(#ff0000 (#008000,#0000ff)) 说明:因为原列表是red,只有一个列表项,所以以空格分隔,括号内的green和blue看做整体。
  • join()中传入列表项,join()只能连接【两个】列表项!列表项之后可以多传一个值,指示连接的符号,只能是space(空格)或comma(逗号)。连接符号与列表项用【逗号】分隔,列表项中的各个值,以逗号或空格分隔都行。 eg:join((blue,green),(red orange),comma) >(#0000ff,#008000,#ff0000,#ffa500)
  • 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):反回一个反相色,红、绿、蓝色值倒过来,而透明度不变。
  • 数字函数: percentage($value):将一个不带单位的数转换成百分比值; round($value):将数值四舍五入,转换成一个最接近的整数; ceil($value):将小数向上取整; floor($value):将小数向下取整; abs($value):返回一个数的绝对值; min($numbers…):找出几个数值之间的最小值; max($numbers…):找出几个数值之间的最大值; random(): 获取随机数
  • Sass的@for循环: @for $i from <start> through <end> //包括end @for $i from <start> to <end> //不包括end
  • @warn @warn 和 @debug 功能类似,用来帮助我们更好的调试 Sass。如: @mixin adjust-location($x, $y) { @if unitless($x) { @warn "Assuming #{$x} to be in pixels"; $x: 1px * $x; } @if unitless($y) { @warn "Assuming #{$y} to be in pixels"; $y: 1px * $y; } position: relative; left: $x; top: $y; } @mixin adjust-location($x, $y) { @if unitless($x) {//unitless是内置函数,判断数值是否有“单位” @warn "Assuming #{$x} to be in pixels"; $x: 1px * $x; } @if unitless($y) { @warn "Assuming #{$y} to be in pixels"; $y: 1px * $y; } position: relative; left: $x; top: $y; } .botton{ @include adjust-location(20px, 30); }
首页上一页1234567下一页尾页

举报

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

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