赏析一段优秀的开源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