Heim > Web-Frontend > CSS-Tutorial > Sammlung häufig verwendeter Sass-Funktionen

Sammlung häufig verwendeter Sass-Funktionen

高洛峰
Freigeben: 2016-11-17 14:31:40
Original
1318 Leute haben es durchsucht

@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);
}
Nach dem Login kopieren


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage