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);
    }
  • 相关阅读:
    系统设计的一些原则
    分层开发思想与小笼包
    工作与生活
    Microsoft .NET Pet Shop 4 架构与技术分析
    用人之道(二) 如何管理软件开发团队
    也谈很多开发人员的毛病
    《3S新闻周刊》第10期,本期策划:“超女”营销带来的启示
    浅析ArcIMS
    MapX的坐标问题
    应用ArcIMS构建GMap风格的地图应用
  • 原文地址:https://www.cnblogs.com/Brose/p/sass_mixin_function.html
Copyright © 2011-2022 走看看