为了账号安全,请及时绑定邮箱和手机立即绑定
  • 尝试多次,如果两个值(抛弃 deg 和 %,仅仅是数值)相同,计算出来的颜色也会一样。 这里有一个很有意思的地方,在 HSL 颜色表达方式上,色相是从 -360 和 360 之间,负值逆时针转,正值顺时针转。在这个实例中,原色的色相值约 356deg,加上 30deg 后,新颜色变成了 386deg,但我们的色盘中并没有比 360deg 更大的值,此时新颜色的值也并不会是386deg,那将怎么办呢?其实很简单,当值大于 360deg时,表示色盘转完了一圈,继续顺时针转余下的值(这里是 26deg),那么这个继续转的值就是新颜色的色相值。小伙伴们,看到这个,你是不是又有点惊了。反之,得到的负数值也是一样的道理。
    查看全部
  • saturation($baseColor) 函数测量颜色的饱和度 saturate($baseColor,30%); //在原色饱和度基础上增加饱和度,加法 desaturate($baseColor,30%);//在原色饱和度基础上减少饱和度,减法
    查看全部
  • 拓展:函数 lightness() 函数检测颜色的亮度。 正题:lighten() 和 darken() 函数只是在原始颜色的基础上对亮度值进行运算操作,前者加法后者减法,用法:函数名($变量名,百分数/小数) 但是生成出来的新颜色在色相和饱和度会有略微的变化,比如上面的实例生成的新颜色与原始色在色相与饱和度值的对比: 当颜色的亮度值接近或大于 100%,颜色会变成白色;反之颜色的亮度值接近或小于 0 时,颜色会变成黑色。
    查看全部
  • 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):反回一个反相色,红、绿、蓝色值倒过来,而透明度不变。
    查看全部
    0 采集 收起 来源:HSL函数简介

    2016-07-22

  • $weight 为 合并的比例(选择权重),默认值为 50%,其取值范围是 0~1 之间。它是每个 RGB 的百分比来衡量,当然透明度也会有一定的权重。默认的比例是 50%,这意味着两个颜色各占一半,如果指定的比例是 25%,这意味着第一个颜色所占比例为 25%,第二个颜色所占比例为75%。即$weight这个表示的是第一个颜色所占的比例,从而可以推算第二个颜色所占的比例
    查看全部
  • 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 中的
    查看全部
  • 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 采集 收起 来源:Sass Maps的函数

    2016-07-20

  • 首先有一个类似于 Sass 的变量一样,用个 $ 加上命名空间来声明 map。后面紧接是一个小括号 (),将数据以 key:value 的形式赋予,其中 key 和 value 是成对出现,并且每对之间使用逗号 (,) 分隔,其中最后一组后面没有逗号。 其中键 key 是用来查找相关联的值 value。使用 map 可以很容易收集键的值和动态插入。 map 的嵌套实用性也非常的强,大家可能有碰到过换皮肤的项目,可能每一套皮肤对应的颜色蛮多的, 那么使用此功能来管理颜色的变量就非常的有条理性,便于维护与管理。 对于 Sass 的 map,还可以让 map 嵌套 map。其实就是 map 的某一个 key 当成 map,里面可以继续放一对或者多对 key:value:
    查看全部
    0 采集 收起 来源:Map

    2016-07-20

  • if(判断条件,条件成立时的返回值,条件不成立时的返回值)
    查看全部
    0 采集 收起 来源:Miscellaneous函数

    2016-07-20

  • 用户在调用混合宏时,如果用户没有给参数值加上单位,程序会自动加入单位。
    查看全部
    0 采集 收起 来源:unitless()函数

    2016-07-20

  • unit() 函数主要是用来获取一个值所使用的单位,碰到复杂的计算时,其能根据运算得到一个“多单位组合”的值,不过只充许乘、除运算,不过只充许乘、除运算,不过只充许乘、除运算 但加、减碰到不同单位时,unit() 函数将会报错,除 px 与 cm、mm 运算之外
    查看全部
    0 采集 收起 来源:unit()函数

    2016-07-19

  • number 为数值型。 string 为字符串型。 bool 为布尔型。 color 为颜色型。
    查看全部
  • 在使用zip()函数时,每个单一的列表个数值必须是相同的 zip()函数中每个单一列表的值对应的取其相同位置值: --- List ------ nth(1) ------ nth(2) ------ nth(3) --- ------------------------------------------------------ List1 1px 2px 3px ------------------------------------------------------ List2 solid dashed dotted ------------------------------------------------------ List3 green blue red ------------------------------------------------------
    查看全部
    0 采集 收起 来源:zip()函数

    2016-07-19

  • append() 函数是用来将某个值插入到列表中,并且处于最末位。 如果没有明确的指定 $separator 参数值,其默认值是 auto。 如果列表只有一个列表项时,那么插入进来的值将和原来的值会以空格的方式分隔。 如果列表中列表项是以空格分隔列表项,那么插入进来的列表项也将以空格分隔; 如果列表中列表项是以逗号分隔列表项,那么插入进来的列表项也将以逗号分隔。 当然,在 append() 函数中,可以显示的设置 $separator 参数, 如果取值为 comma 将会以逗号分隔列表项 如果取值为 space 将会以空格分隔列表项 例如 append((blue green),red,space) 结果是(#0000ff #008000 #ff0000) append((blue, green),red,comma) 结果是 (#0000ff, #008000, #ff0000)
    查看全部
    0 采集 收起 来源:append()函数

    2016-07-19

举报

0/150
提交
取消
课程须知
对CSS有一定的了解,以及最好是学习完成《sass基础篇》课程,才可以更好的学习本课程。
老师告诉你能学到什么?
1、Sass 的控制命令 2、Sass 的函数功能 3、Sass 的函数的 @ 规则

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

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