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

男娘i 2022-12-20 15:58 129阅读 0赞

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][csshake_scss_tools.scss]

[csshake_scss_tools.scss]: https://github.com/elrumordelaluz/csshake/blob/master/scss/_tools.scss