为了账号安全,请及时绑定邮箱和手机立即绑定
  • RGB颜色函数-RGBA()函数 2、rgba() 函数主要用来将一个颜色根据透明度转换成 rgba 颜色。 语法有两种格式: rgba($red,$green,$blue,$alpha) //将一个rgba颜色转译出来,和未转译的值一样 rgba($color,$alpha) //将一个Hex颜色转换成rgba颜色 rgba($color,$alpha) 函数主要运用在这样的情形之中:假设在实际中知道的颜色值是 #f36 或者 red,但在使用中,需要给他们配上一个透明度,这个时候在原来的 CSS 中,首先需要通过制图工具,得到 #f36 或 red 颜色的 R、G、B 值,而不能直接使用(注意 css3 是可以的,但是存在浏览器兼容问题): $color: #f36; $bgColor: orange; $borderColor:green; 同时给他们加上 .5 的透明度: //SCSS .rgba { color: rgba(#f36,.5); background: rgba(orange,.5); border-color: rgba(green,.5); } 语法:在括号是函数的参数,第一个参数是需要转换的颜色,他可以是任何颜色的表达方式,也可以是一个颜色变量;第二个参数是颜色的透明度,其值是 0~1 之间。 .rgba { color: rgba(255, 51, 102, 0.5); background: rgba(255, 165, 0, 0.5); border-color: rgba(0, 128, 0, 0.5); } 在来看一个调用前面定义的变量: //SCSS .rgba { color: rgba($color,.5); background: rgba($bgColor,.5); border-color: rgba($borderColor,.5); }
    查看全部
  • RGB颜色函数-RGB()颜色函数 主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数,比如说 adjust-color 和 change-color 等。 1、RGB颜色函数 RGB 颜色只是颜色中的一种表达式,其中 R 是 red 表示红色,G 是 green 表示绿色而 B 是 blue 表示蓝色。在 Sass 中为 RGB 颜色提供六种函数: rgb($red,$green,$blue):根据红、绿、蓝三个值创建一个颜色; rgba($red,$green,$blue,$alpha):根据红、绿、蓝和透明度值创建一个颜色; red($color):从一个颜色中获取其中红色值; green($color):从一个颜色中获取其中绿色值; blue($color):从一个颜色中获取其中蓝色值; mix($color-1,$color-2,[$weight]):把两种颜色混合在一起。 sass -i 在命令终端开启这个命令,相当于开启 Sass 的函数计算。 $ sass -i >> rgb(200,40,88) //根据r:200,g:40,b:88计算出一个十六进制颜色值 #c82858 >> rgba(#c82858,.65) //根据#c82858的65%透明度计算出一个rgba颜色值 rgba(200, 40, 88, 0.65) >> red(#c82858) //从#c82858颜色值中得到红色值 200 200 >> green(#c82858) //从#c82858颜色值中得到绿色值 40 40 >> blue(#c82858) //从#c82858颜色值中得到蓝色值 88 88 >> mix(#c82858,rgba(200,40,80,.65),.3) //把#c82858和rgba(200,40,88,.65) 两颜色按比例混合得到一个新颜色 rgba(200, 40, 80, 0.65105)
    查看全部
  • Sass Maps的函数-map-remove($map,$key)、keywords($args) map-remove($map,$key) map-remove($map,$key) 函数是用来删除当前 $map 中的某一个 $key,从而得到一个新的 map。其返回的值还是一个 map。他并不能直接从一个 map 中删除另一个 map,仅能通过删除 map 中的某个 key 得到新 map。如: $map:map-remove($social-colors,dribble); 返回的是一个新 map: $map:( facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee ); 如果删除的 key 并不存在于 $map 中,那么 map-remove() 函数返回的新 map 和以前的 map 一样。 $map:map-remove($social-colors,weibo); 返回的值: $map: ( dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee ); keywords($args) keywords($args) 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 ); 在命令终端可以看到一个输入的 @debug 信息:
    查看全部
  • Sass Maps的函数-map-values($map)、map-merge($map1,$map2) map-values($map) map-values($map) 函数类似于 map-keys($map) 功能,不同的是 map-values($map )获取的是 $map 的所有 value 值,可以说也将是一个列表。而且,map-values($map) 中如果有相同的 value 也将会全部获取出来。 $social-colors: ( dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee ); map-values($social-colors) 将会返回: #ea4c89,#3b5998,#171515,#db4437,#55acee 值与值之间同样用逗号分隔。 map-merge($map1,$map2) map-merge($map1,$map2) 函数是将 $map1 和 $map2 合并,然后得到一个新的 $map。如果你要快速将新的值插入到 $map 中的话,这种方法是最佳方法。假设我们有两个 $map: $color: ( text: #f36, link: #f63, border: #ddd, backround: #fff ); $typo:( font-size: 12px, line-height: 1.6 ); 如果希望将这两个 $map 合并成一个 map,我们只要这样做: $newmap: map-merge($color,$typo); 将会生成一个新的 map: $newmap:( text: #f36, link: #f63, border: #ddd, background: #fff, font-size: 12px, line-height: 1.6 ); 这样你就可以借助 map-get()等函数做其他事情了。 不过有一点需要注意,如果 $map1 和 $map2 中有相同的 $key 名,那么将 $map2 中的 $key 会取代 $map1 中的
    查看全部
  • Sass Maps的函数-map-keys($map) map-keys($map) 函数将会返回 $map 中的所有 key。这些值赋予给一个变量,那他就是一个列表。如: map-keys($social-colors); 其返回的值为: "dribble","facebook","github","google","twitter" 换句话说: $list: map-keys($social-colors); 相当于: $list:"dribble","facebook","github","google","twitter";
    查看全部
  • 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就没有
    查看全部
  • Sass Maps的函数-map-get($map,$key) map-get($map,$key) 函数的作用是根据 $key 参数,返回 $key 在 $map 中对应的 value 值。如果 $key 不存在 $map中,将返回 null 值。此函数包括两个参数: $map:定义好的 map。 $key:需要遍历的 key。 来看一个简单的示例,假设定义了一个 $social-colors 的 map: $social-colors: ( dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee ); 假设要获取 facebook 键值对应的值 #3b5998,我们就可以使用 map-get() 函数来实现: .btn-dribble{ color: map-get($social-colors,facebook); } 编译出来的CSS: .btn-dribble { color: #3b5998; } 我们来看另一种情况,假设 $social-colors 这个 map 没有 $weibo 这个 key: .btn-weibo{ font-size: 12px; color: map-get($social-colors,weibo); } 此时编译出来的是CSS: .btn-weibo { font-size: 12px; } 从 编译出来的 CSS 可以得知,如果 $key 不在 $map 中,不会编译出 CSS,其实在 Sass 中,map-get($social- colors,weibo) 返回了一个 null 值。但在编译出来的 CSS 中,你只知道他没有编译出样式,而且在命令终端编译时,也没有任何错误或者警告信息。说实话,你并不知道他为什么编译不出来样式,或者说他已返回了值为 null。体验不强,也不好排错。其实如果我们自定义一个函数,另外加个判断,那就截然不同。
    查看全部
  • Sass Maps的函数 前面介绍了使用 map 来管理变量,但要在 Sass 中获取变量,或者对 map 做更多有意义的操作,我们必须借助于 map 的函数功能。在 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。
    查看全部
    0 采集 收起 来源:Sass Maps的函数

    2015-11-20

  • Map Sass 的 map 常常被称为数据地图,也有人称其为数组,因为他总是以 key:value 成对的出现,但其更像是一个 JSON 数据。 Sass 的 map : $map: ( $key1: value1, $key2: value2, $key3: value3 ) 首先有一个类似于 Sass 的变量一样,用个 $ 加上命名空间来声明 map。后面紧接是一个小括号 (),将数据以 key:value 的形式赋予,其中 key 和 value 是成对出现,并且每对之间使用逗号 (,) 分隔,其中最后一组后面没有逗号。 其中键 key 是用来查找相关联的值 value。使用 map 可以很容易收集键的值和动态插入。在 Sass 中常用下面的方式定义变量: $default-color: #fff !default; $primary-color: #22ae39 !default; 我们使用 map 可以更好的进行管理: $color: ( default: #fff, primary: #22ae39 ); 你需要新增加颜色变量值,在 map 中可以非常随意的添加: $color: ( default: #fff, primary: #22ae39, negative: #d9534f ); 对于 Sass 的 map,还可以让 map 嵌套 map。其实就是 map 的某一个 key 当成 map,里面可以继续放一对或者多对 key:value: $map: ( key1: value1, key2: ( key-1: value-1, key-2: value-2, ), key3: value3 ); 有碰到过换皮肤的项目,可能每一套皮肤对应的颜色蛮多的,那么使用此功能来管理颜色的变量就非常的有条理性,便于维护与管理。你可以这样使用: 没有记录完
    查看全部
    0 采集 收起 来源:Map

    2015-11-19

  • Miscellaneous函数 在这里吧Miscellaneous函数称为三元条件函数,主要因为他和JavaScript中的三元判断非常的相似。他有两个值,当条件成立返回一种值,当条件不成立时返回另一种值: if($condition,$if-true,$if-false) 上面表达式的意思是当$condition条件成立时,返回的值为 $if-true,否则返回的是 $if-false 值。 >> if(true,1px,2px) 1px >> if(false,1px,2px) 2px
    查看全部
    0 采集 收起 来源:Miscellaneous函数

    2018-03-22

  • 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

  • unitless()函数 unitless() 函数相对来说简单明了些,只是用来判断一个值是否带有单位,如果不带单位返回的值为 true,带单位返回的值为 false: >> unitless(100) true >> unitless(100px) false >> unitless(100em) false >> unitless(100%) false >> unitless(1 /2 ) true >> unitless(1 /2 + 2 ) true >> unitless(1px /2 + 2 ) false 代码实现:用户在调用混合宏时,如果用户没有给参数值加上单位,程序会自动加入单位。 @mixin adjust-location($x, $y) { @if unitless($x) { $x: 1px * $x; } @if unitless($y) { $y: 1px * $y; } position: relative; left: $x; top: $y; } .botton{ @include adjust-location(20px, 30); }
    查看全部
    0 采集 收起 来源:unitless()函数

    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"
    查看全部
  • Introspection函数 Introspection函数包括了几个判断型函数: type-of($value):返回一个值的类型 unit($number):返回一个值的单位; unitless($number):判断一个值是否带有带位 comparable($number-1, $number-2):判断两个值是否可以做加、减和合并 这几个函数主要用来对值做一个判断的作用,我们来依次看每个函数的功能。
    查看全部
    0 采集 收起 来源:Introspection函数

    2015-11-19

举报

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

微信扫码,参与3人拼团

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

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