-
上面的例子说明了一切问题。当颜色的亮度值接近或大于 100%，颜色会变成白色；反之颜色的亮度值接近或小于 0 时，颜色会变成黑色。查看全部
-
round可以带单位例如PX EM查看全部
-
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); }查看全部
举报
0/150
提交
取消