您的位置:首页 > 其它

sass 常用函数的整理

2016-11-17 14:19 127 查看
@charset "utf-8";
@import "compass/css3/inline-block";
@import "compass/css3/border-radius";
@import "compass/utilities/sprites";
@import "compass/utilities/general";

@mixin position($top,$right,$bottom,$left) {
top: $top;
right: $right;
bottom: $bottom;
left: $left;
}
//尺寸
@mixin mySize($width,$height:$width) {
width: $width;
height: $height;
}

/*行高,兼容IE8*/
@mixin lineHeight($value) {
line-height: $value;
line-height: $value \9
;
line-height: $value \0
;
}

//背景透明,文字不透明。兼容IE8
@mixin betterTransparentize($color, $alpha) {
$c: rgba($color, $alpha);
$ie_c: ie_hex_str($c);
background: rgba($color, 1);
background: $c;
background: transparent \9
;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c});
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c})";
}

//添加浏览器前缀
@mixin browserPrefix($propertyName,$value) {
@each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
#{$prefix}#{$propertyName}: $value;
}
}

//最小高度
@mixin minHeight($height) {
min-height: $height;
height: auto !important;
@if $legacy-support-for-ie {
_height: $height;
}
}

//固定宽度子元素,水平垂直居中
@mixin center($width:null,$height:null) {
@if $width and $height {
position: absolute;
left: 50%;
top: 50%;
display: block;
margin-left: -($width/2);
margin-top: -($height/2);
}
//@if not $width and not $height {
//  @include browserPrefix(transform,translate(-50%, -50%));
//} @else if $width and $height {
//  margin: -($width / 2) #{0 0} -($height / 2);
//} @else if not $height {
//  width: $width;
//  margin-left: -($width / 2);
//  @include browserPrefix(transform,translateY(-50%));
//} @else {
//  margin-top: -($height / 2);
//  @include browserPrefix(transform,translateX(-50%));
//}
}

//圆角,兼容IE8
@mixin radius($value) {
@include border-radius($value);
-ms-behavior: url(./css/PIE-1.0.0/PIE.htc);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: