-
percentage : 参数是不带单位的数值
查看全部 -
//练习 $grid-prefix: span!default; $grid-width: 60px!default; $grid-gutter: 20px!default; %grid{ float:left; margin-left:$grid-gutter/2; margin-right:$grid-gutter/2; } //through @for $i from 1 through 12{ .#{$grid-prefix}#{$i}{ width:$grid-width*$i+$grid-gutter*($i - 1 ); @extend %grid; } } //to @for $i from 1 to 13{ .#{$grid-prefix}#{$i}{ width:$grid-width*$i+$grid-gutter*($i - 1); @extend %grid; } }查看全部
-
map-values($map) 函数类似于 map-keys($map) 功能，不同的是 map-values($map )获取的是 $map 的所有 value 值，可以说也将是一个列表。而且，map-values($map) 中如果有相同的 value 也将会全部获取出来。值与值之前同样用逗号分隔。 map-merge($map1,$map2) 函数是将 $map1 和 $map2 合并，然后得到一个新的 $map。如果你要快速将新的值插入到 $map 中的话，这种方法是最佳方法。 $newmap: map-merge($color,$typo); 如果 $map1 和 $map2 中有相同的 $key 名，那么将 $map2 中的 $key 会取代 $map1 中的.查看全部
-
map-get($map,$key) 函数的作用是根据 $key 参数，返回 $key 在 $map 中对应的 value 值。如果 $key 不存在 $map中，将返回 null 值。 e.g.: .btn-dribble{ color: map-get($social-colors,facebook); } 如果 $key 不在 $map 中，不会编译出 CSS，其实在 Sass 中，map-get($social- colors,weibo) 返回了一个 null 值.查看全部
-
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。查看全部
-
Introspection 函数包括了几个判断型函数： type-of($value)：返回一个值的类型 unit($number)：返回一个值的单位 unitless($number)：判断一个值是否带有单位 comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并查看全部
-
在 nth($list,$n) 函数中的 $n 必须是大于 0 的整数（从1而不是0开始）： 在 Sass 中，nth() 函数和其他语言不同，1 是指列表中的第一个标签值，2 是指列给中的第二个标签值，依此类推。如： >> nth(10px 20px 30px,1) 10px >> nth((Helvetica,Arial,sans-serif),2) "Arial" （？） >> nth((1px solid red) border-top green,1) (1px "solid" #ff0000)查看全部
-
length($list)：返回一个列表的长度值； nth($list, $n)：返回一个列表中指定的某个标签值 index($list, $value)：返回一个值在列表中的位置值。 join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表； append($list1, $val, [$separator])：将某个值放在列表的最后； zip($lists…)：将几个列表结合成一个多维的列表；查看全部
-
percentage($value)：将一个不带单位的数转换成百分比值； round($value)：将数值四舍五入，转换成一个最接近的整数； ceil($value)：将大于自己的小数转换成下一位整数； floor($value)：将一个数去除他的小数部分； abs($value)：返回一个数的绝对值； min($numbers…)：找出几个数值之间的最小值； max($numbers…)：找出几个数值之间的最大值； random(): 获取随机数查看全部
-
很多人都没看懂为什么会是.intrusion.seriousError ? 其实，关键点在于看明白.error.intrusion，这个写法代表的是两个类，相当于<div class='error intrusion'></div>，因此.seriousError继承了.error，那么<div class='seriousError intrusion'></div>就具有和<div class='error intrusion'></div>相同的样式，而<div class='seriousError intrusion'></div>和<div class='intrusion seriousError'></div>又有什么区别呢？ 所以，编译器编译出： .error.intrusion, .intrusion.seriousError { background-image: url("/image/hacked.png"); } 应该是一点问题也没有，至于为什么不编译成.seriousError.intrusion估计就得看源码了。。看懂了这个，其他的都类似。。查看全部
-
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)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。查看全部
-
在网格系统中生成各个格子： //SCSS $grid-prefix: span !default; $grid-width: 60px !default; $grid-gutter: 20px !default; %grid { float: left; margin-left: $grid-gutter / 2; margin-right: $grid-gutter / 2; } @for $i from 1 through 12 { .#{$grid-prefix}#{$i} { width: $grid-width * $i + $grid-gutter * ($i - 1); @extend %grid; } }查看全部
-
主要包括： 字符串函数 数字函数 列表函数 颜色函数 Introspection 函数 三元函数等 当然除了自备的函数功能之外，我们还可以根据自己的需求定义函数功能，常常称之为自定义函数。查看全部
-
变量 混合宏 继承 占位符 插值 运算 数据类型查看全部
-
@mixin color($colors...){ @if length(keywords($colors)) != 0 { $colors_map: keywords($colors); @each $key, $value in $colors_map { .btn-#{$key} { color: $value; } } } @else if length($colors) > 1 { @for $i from 1 through length($colors) { .btn-#{$i} { color: nth($colors, $i); } } } @else if length($colors) == 1 { .btn-only { color: $colors; } } @else if length($colors) == 0 { $colors:red; .btn-default { color: $colors; } } } @include color(); @include color(green); @include color(#D65252,#441414,#1B2AD1); @include color( $dribble: #ea4c89, $facebook: #3b5998, $github: #171515, $google: #db4437, $twitter: #55acee);查看全部
举报
0/150
提交
取消