zoukankan      html  css  js  c++  java
  • sass 常用函数的整理

    @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 
    ;
    }
    
    //背景透明,文字不透明。兼容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($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);
    }
  • 相关阅读:
    求菲波那契数列的第n个数
    一个球,初始高度100,每次落下回弹一半高度,求第n次落下球走的距离
    MySQL优化
    linux常用命令2
    win7安装ANT
    win7配置java环境变量
    kvm虚拟机磁盘文件读取小结
    kvm linux虚拟机在线扩展磁盘
    binlog2sql
    linux上 查看mysql的binglog日志
  • 原文地址:https://www.cnblogs.com/Brose/p/sass_mixin_function.html
Copyright © 2011-2022 走看看