赏析一段优秀的开源sass代码

 cssshake 的核心代码赏析，使用多个sass的高级属性，混入，函数，变量，

      // Variables
      $prefix: 'shake' !default;
      $trigger: 'shake-trigger' !default;
      // Placeholders
      %shake {
       display: inherit;
       transform-origin: center center;
      }
      %paused   { animation-play-state: paused; }
      %running  { animation-play-state: running; }
      @function apply-random($input) {
       @return if($input != 0, random($input) - $input/2, 0);
      }
      /// Do The Shake
      /// @param {String}  $name ['shake']              - Name for the keyframes animation
      /// @param {Number}  $h [5px]                     - Max number for random to assign in x axis
      /// @param {Number}  $v [5px]                     - Max number for random to assign in y axis
      /// @param {Number}  $r [3deg]                    - Max number for random rotation
      /// @param {Number}  $dur [100ms]                 - animation-duration; valid time value
      /// @param {Number}  $precision [.1]              - Precision of the keyframes animation (i.e 2 > 2%, 4%, 6%...)
      /// @param {Boolean} $opacity [false]             - To apply random animation also in the opacity property
      /// @param {String}  $q [infinite]                - animation-iteration-count; valid value
      /// @param {String}  $t [ease-in-out]             - animation-timing-function; valid value
      /// @param {Number}  $delay [null]                - animation-delay; valid time value
      /// @param {Number}  $chunk [100%]                - Part of 100% where apply the animation
      @mixin do-shake(
        $name: 'shake',
        $h: 5px,
        $v: 5px,
        $r: 3deg,
        $dur: 100ms,
        $precision: .02,
        $opacity: false,
        $q: infinite,
        $t: ease-in-out,
        $delay: null,
        $chunk: 100%
        ) {
        $rotate: 0;
        $move-x: 0;
        $move-y: 0;
        $h: if(unitless($h) and $h != 0, $h * 1px, $h);
        $v: if(unitless($v) and $v != 0, $v * 1px, $v);
        $r: if(unitless($r) and $r != 0, $r * 1deg, $r);
        // Keyframes
       @at-root {
         @keyframes #{$name} {
            $interval: if($precision > 0 and $precision < 1, 100 * $precision, 10);
            $step: $interval * 1%;
           @while $step < $chunk {
              $rotate: apply-random($r);
              $move-x: apply-random($h);
              $move-y: apply-random($v);
              #{$step} {
               transform: translate($move-x, $move-y) rotate($rotate);
               @if $opacity { opacity: random(100) / 100; }
              }
              $step: $step + $interval;
            }
            #{ if($chunk < 100%, (0%, $chunk, 100%), (0%, 100%)) } {
             transform: translate(0, 0) rotate(0);
            }
          }
        }
       @extend %shake;
        &:hover,
        .#{$trigger}:hover &,
        &.#{$prefix}-freeze,
        &.#{$prefix}-constant {
         @if $delay { animation-delay: $delay; }
         animation-name: #{$name};
         animation-duration: $dur;
         animation-timing-function: $t;
         animation-iteration-count: $q;
        }
        &:hover,
        .#{$trigger}:hover & { @extend %running; }
      }
      .#{$prefix}-freeze,
      .#{$prefix}-constant.#{$prefix}-constant--hover:hover,
      .#{$trigger}:hover .#{$prefix}-constant.#{$prefix}-constant--hover {
       @extend %paused;
      }
      .#{$prefix}-freeze:hover,
      .#{$trigger}:hover .#{$prefix}-freeze { @extend %running; }
  
 

  
 
 

地址 csshake/scss/_tools.scss

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/109669135