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);
    }
  • 相关阅读:
    Java中static、final、static final的区别(转)
    Google的JSON风格指南
    Google代码风格指南
    Java中的final关键字(转)
    Java的不定参数(eg:Object...)(转)
    Java Enum枚举的用法(转)
    Java中包装类型和基本类型的使用场景(什么时候使用包装类型)(转)
    Java常用的集合类(转)
    使用Swagger生成Spring Boot REST客户端(支持Feign)(待实践)
    Java搜索引擎选择: Elasticsearch与Solr(转)
  • 原文地址:https://www.cnblogs.com/Brose/p/sass_mixin_function.html
Copyright © 2011-2022 走看看