Maison > interface Web > tutoriel CSS > sass 常用函数的整理

sass 常用函数的整理

高洛峰
Libérer: 2016-11-17 14:31:40
original
1318 Les gens l'ont consulté

@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);
}
Copier après la connexion


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal