登录  /  注册
首页 > web前端 > css教程 > 正文

sass 常用函数的整理

高洛峰
发布: 2016-11-17 14:31:40
原创
1115人浏览过

@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);
}
登录后复制

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号