欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

sass 常用函数的整理

程序员文章站 2022-05-11 10:23:04
...
@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);
}
相关标签: sass