scss 用于变换和动画的基本SASS混合。

Posted 2021-05-18

/* ------------------------------------------
 * --mixins
 * ------------------------------------------ */


/**
 * css transform
 * @param $transforms
 */
@mixin transform($transforms) {
    -webkit-transform: $transforms;
       -moz-transform: $transforms;
        -ms-transform: $transforms;
         -o-transform: $transforms;
            transform: $transforms;
}

/**
 * css translate - shortcut for the transform
 * @param $x
 * @param $y
 */
@mixin translate($x, $y){
    @include transform(translate($x, $y));
}


/**
 * css transition prefix
 * @param $args
 */
@mixin transition($args...) {
  -webkit-transition: $args;
     -moz-transition: $args;
      -ms-transition: $args;
       -o-transition: $args;
          transition: $args;
}



/**
 * keyframes and animation mixin
 *
 * @usage
 *   @include keyframes( [keyframe name] )
 *
 * @example
 *   @include keyframes( fadein ){
 *       0%   { opacity: 0; }
 *       100% { opacity: 1; }  
 *   }
 */
@mixin keyframes($animation-name) {
    @-webkit-keyframes #{$animation-name} {
        @content;
    }
    @-moz-keyframes #{$animation-name} {
        @content;
    }  
    @-ms-keyframes #{$animation-name} {
        @content;
    }
    @-o-keyframes #{$animation-name} {
        @content;
    }  
    @keyframes #{$animation-name} {
        @content;
    }
}

/**
 * animation mixin to prefix all the animations
 *
 * @usage
 *   @include animation( [name] [duration] [repeat] [delay] );
 *
 * @example
 *   @include animation( fadein 1s infinite 0s );
 */
@mixin animation($str) {
  -webkit-animation: #{$str};
     -moz-animation: #{$str};
      -ms-animation: #{$str};
       -o-animation: #{$str};
          animation: #{$str};      
}