为了账号安全,请及时绑定邮箱和手机立即绑定
  • 这两个函数是用来对已有颜色的透明度做一个加法运算,会让颜色更加不透明。其接受两个参数,第一个参数是原始颜色,第二个参数是你需要增加的透明度值,其取值范围主要是在 0~1 之间。当透明度值增加到大于 1 时,会以 1 计算,表示颜色不具有任何透明度。 >> opacify(rgba(22,34,235,.6),.2) rgba(22, 34, 235, 0.8) >> opacify(rgba(22,34,235,.6),.5) #1622eb >> opacify(hsla(22,34%,23%,.6),.15) rgba(79, 53, 39, 0.75) >> opacify(hsla(22,34%,23%,.6),.415) #4f3527 >> opacify(red,.15) #ff0000 >> opacify(#89adde,.15) #89adde >> fade-in(rgba(23,34,34,.5),.15) rgba(23, 34, 34, 0.65) >> fade-in(rgba(23,34,34,.5),.615) #172222 其中 fade-in( ) 函数又名 fade_in() 函数。其所起作用等效。
    查看全部
  • Opacity函数-rgba()函数 在前面介绍 RGB 函数一节中,还记得吗?有一个 rgba() 函数可以创建一个颜色,同时还可以对颜色修改其透明度。其可以接受两个参数,第一个参数为颜色,第二个参数是你需要设置的颜色透明值。 >> rgba(red,.5) rgba(255, 0, 0, 0.5) >> rgba(#dedede,.5) rgba(222, 222, 222, 0.5) >> rgba(rgb(34,45,44),.5) rgba(34, 45, 44, 0.5) >> rgba(rgba(33,45,123,.2),.5) rgba(33, 45, 123, 0.5) >> rgba(hsl(33,7%,21%),.5) rgba(57, 54, 50, 0.5) >> rgba(hsla(33,7%,21%,.9),.5) rgba(57, 54, 50, 0.5)
    查看全部
  • Opacity函数-alpha()、opacity()函数 alphpa() 和 opacity() 函数很简单,与前面介绍的 red(),green() 等函数很类似。这个函数的主要功能是用来获取一个颜色的透明度值。如果颜色没有特别指定透明度,那么这两个函数得到的值都会是 1: >> alpha(red) 1 >> alpha(rgba(red,.8)) 0.8 >> opacity(red) 1 >> opacity(rgba(red,.8)) 0.8
    查看全部
  • HSL函数-grayscale()函数 这个函数会颜色的饱和度值直接调至 0%,所以此函数与 desaturate($color,100%) 所起的功能是一样的。一般这个函数能将彩色颜色转换成不同程度的灰色。 //SCSS $baseColor: #ad141e; .grayscale { background: grayscale($baseColor); } .desaturate { background: desaturate($baseColor,100%); } 编译出来的 css 代码: //CSS .grayscale { background: #616161; } .desaturate { background: #616161; } 看看计算出来的 HSL 各个值的变化: >> hue(#ad141e) 356.07843deg >> hue(#616161) 0deg >> saturation(#ad141e) 79.27461% >> saturation(#616161) 0% >> lightness(#ad141e) 37.84314% >> lightness(#616161) 38.03922% grayscale() 函数处理过的颜色,其最大的特征就是颜色的饱和度为 0。
    查看全部
  • Sass Maps的函数-map-has-key($map,$key) map-has-key($map,$key) 函数将返回一个布尔值。当 $map 中有这个 $key,则函数返回 true,否则返回 false。 前面的示例,当 $key 不在 $map 中时,使用 map-get($map,$key) 函数将返回一个 null 值。但对于开发人员,并看不到任何提示信息。如果使用 map-has-key($map,$key) 函数就可以改变这一状态。我们来看一个简单的示例。 我们可以自定义一个函数,比如 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); } .btn-dribble { color: colors(dribble); } .btn-facebook { color: colors(facebook); } .btn-github { color: colors(github); } .btn-google { color: colors(google); } .btn-twitter { color: colors(twitter); } .btn-weibo { color: colors(weibo); } 在ruby编译就有报错提示,用koala就没有
    查看全部
  • comparable()函数 comparable()函数主要是用来判断连个数是否可以进行“加,减”以及“合并”。如果可以返回的值为true,如果不可以返回的值是false: >> comparable(2px,1px) true >> comparable(2px,1%) false >> comparable(2px,1em) false >> comparable(2rem,1em) false >> comparable(2px,1cm) true >> comparable(2px,1mm) true >> comparable(2px,1rem) false >> comparable(2cm,1mm) true
    查看全部
    1 采集 收起 来源:comparable()函数

    2018-03-22

  • unit()函数 unit() 函数主要是用来获取一个值所使用的单位,碰到复杂的计算时,其能根据运算得到一个“多单位组合”的值,不过只充许乘、除运算: >> unit(100) "" >> unit(100px) "px" >> unit(20%) "%" >> unit(1em) "em" >> unit(10px * 3em) "em*px" >> unit(10px / 3em) "px/em" >> unit(10px * 2em / 3cm / 1rem) "em/rem" 但加、减碰到不同单位时,unit() 函数将会报错,除 px 与 cm、mm 运算之外: >> unit(1px + 1cm) "px" >> unit(1px - 1cm) "px" >> unit(1px + 1mm) "px" >> unit(10px * 2em - 3cm / 1rem) SyntaxError: Incompatible units: 'cm' and 'px*em'. >> unit(10px * 2em - 1px / 1rem) SyntaxError: Incompatible units: '' and 'em'. >> unit(1px - 1em) SyntaxError: Incompatible units: 'em' and 'px'. >> unit(1px - 1rem) SyntaxError: Incompatible units: 'rem' and 'px'. >> unit(1px - 1%) SyntaxError: Incompatible units: '%' and 'px'. >> unit(1cm + 1em) SyntaxError: Incompatible units: 'em' and 'cm'. 法整合成一个单位,对于我们在 CSS 中运用中并不适合,比如: >> unit(10px * 3em) "em*px" >> unit(10px / 3em) "px/em" >> unit(10px * 2em / 3cm / 1rem) "em/rem" 换句话说,上面运算出来的单位,对于在 CSS 中使用将是没有任何意义的。
    查看全部
    1 采集 收起 来源:unit()函数

    2018-03-22

  • Introspection 函数 -type-of() type-of()函数主要用来判断一个值是属于什么类型: 返回值: number为数值型。 string为字符串型。 bool为布尔型。 color为颜色型。 >> type-of(100) "number" >> type-of(100px) "number" >> type-of("asdf") "string" >> type-of(asdf) "string" >> type-of(true) "bool" >> type-of(false) "bool" >> type-of(#fff) "color" >> type-of(blue) "color" >> type-of(1 / 2 = 1) "string"
    查看全部
  • 数字函数-min()函数、max()函数 min()函数 min()函数功能主要是在多个数之中找到最小的一个,这个函数可以设置任意多个参数: >> min(1,2,1%,3,300%) 1% >> min(1px,2,3px) 1px >> min(1em,2em,6em) 1em 不过在 min() 函数中同时出现两种不同类型的单位,将会报错误信息: >> min(1px,1em) SyntaxError: Incompatible units: 'em' and 'px'. max()函数 max() 函数和 min() 函数一样,不同的是,max() 函数用来获取一系列数中的最大那个值: >> max(1,5) 5 >> max(1px,5px) 5px 同样的,如果在 max() 函数中有不同单位,将会报错: >> max(1,3px,5%,6) SyntaxError: Incompatible units: '%' and ‘px'.
    查看全部
  • 数字函数-abs()函数 abs()函数会返回一个数的绝对值。 >> abs(10) 10 >> abs(-10) 10 >> abs(-10px) 10px >> abs(-2em) 2em >> abs(-.5%) 0.5% >> abs(-1px / 2px) 0.5 .footer { width:abs(-12.3px); } 编译后的CSS: .footer { width: 12.3px; }
    查看全部
  • 数字函数-floor()函数 floor()函数刚好与ceil()函数功能相反,其主要将一个数去除其小数部分,并且不做任何的进位。也就是只做舍,不做入的计算: >> floor(2.1) 2 >> floor(2.5) 2 >> floor(3.5%) 3% >> floor(10.2px) 10px >> floor(10.8em) 10em >> floor(2px / 10px) 0 >> floor(3px / 1em) 3px/em .footer { width:floor(12.3px); } 编译后的CSS: .footer{ width:12px; }
    查看全部
  • 数字函数-ceil()函数 ceil()函数将一个数转换成最接近于自己的整数,会将一个大于自身的任何小数转换成大于本身1的整数。也就是做入,不会舍的计算: >> ceil(2.0) 2 >> ceil(2.1) 3 >> ceil(2.6) 3 >> ceil(2.3%) 3% >> ceil(2.3px) 3px >> ceil(2.5px) 3px >> ceil(2px / 3px) 1 >> ceil(2% / 3px) 1%/px >> ceil(1em / 5px) 1em/px .footer { width:ceil(12.3px); } 编译后的CSS: .footer{ width:13px; }
    查看全部
  • @while循环 @while指令也需要SassScript表达式(像其他指令一样),并且会生成不同的样式块,直到表达式值为false时停止循环。这个和@for指令很相似,只要@while后面的条件为true就会执行。 @while指令简单用例: //SCSS $types: 4; $type-width: 20px; @while $types > 0 { .while-#{$types}{ width: $type-width + $types; } $types: $types - 1; } 编译出来的 CSS .while-4 { width: 24px; } .while-3 { width: 23px; } .while-2 { width: 22px; } .while-1 { width: 21px; }
    查看全部
    1 采集 收起 来源:@while循环

    2018-03-22

  • @if @for @while的条件都没有括号
    查看全部
    1 采集 收起 来源:@while循环

    2015-11-12

  • floor只舍不入
    查看全部

举报

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

微信扫码,参与3人拼团

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

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