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);
    }
  • 相关阅读:
    线程
    实数四则运算表达式的计算,C++ 实现
    [Compiling Principles] LEX基本功能的实现
    2010年ImagineCup,我们共同走过
    [WPF] Felix 的线程学习笔记(一)——从Win32的消息循环说起
    [WPF] Felix 的线程学习笔记(二)——从WPF入手,实现简单的多线程
    [ASP] asp 中的ajax使用
    银行家算法C++实现
    [ASP.NET] 事件与委托的处理
    小郁闷
  • 原文地址:https://www.cnblogs.com/Brose/p/sass_mixin_function.html
Copyright © 2011-2022 走看看