SASを効率的に使用してコードを保存DRY

Question

私は次のコードを書いていますが、SASSの可能性を最大限に活用するとこれは短くなる可能性があります。

コード：

&.pos-y-top { 
    .dropdown-element { 
     top: 0; 
     .content-wrapper { 
     .content, app-dropdown-content { 
      bottom: 0; 
     } 
     } 
    } 
    } 

    &.pos-y-bottom { 
    .dropdown-element { 
     bottom: 0; 
     .content-wrapper { 
     .content, app-dropdown-content { 
      top: 0; 
     } 
     } 
    } 
    } 

    &.pos-x-left { 
    .dropdown-element { 
     right: 0; 
     .content-wrapper { 
     .content, app-dropdown-content { 
      right: 0; 
     } 
     } 
    } 
    } 

    &.pos-x-right { 
    .dropdown-element { 
     left: 0; 
     .content-wrapper { 
     .content, app-dropdown-content { 
      left: 0; 
     } 
     } 
    } 
    } 

    &.pos-x-left.pos-y-bottom { 
    .dropdown-element { 
     .content-wrapper { 
     .content, app-dropdown-content { 
      transform-origin: top right; 
     } 
     } 
    } 
    } 

    &.pos-x-left.pos-y-top { 
    .dropdown-element { 
     .content-wrapper { 
     .content, app-dropdown-content { 
      transform-origin: bottom right; 
     } 
     } 
    } 
    } 

    &.pos-x-right.pos-y-bottom { 
    .dropdown-element { 
     .content-wrapper { 
     .content, app-dropdown-content { 
      transform-origin: top left; 
     } 
     } 
    } 
    } 

    &.pos-x-right.pos-y-top { 
    .dropdown-element { 
     .content-wrapper { 
     .content, app-dropdown-content { 
      transform-origin: bottom left; 
     } 
     } 
    } 
    } 

私は@eachで昨日試してみましたが、私はそれを終えた後のコードは、この1と同じくらいの長さでした。

誰も私にこのようなコードを書くための「スマートな」方法を示すことができますか？

Answer 1

パラメータを指定して@mixinと書いて、それに必要な値を含めることをお勧めします。例えば、

@mixin distances($top: 0, $right: 0, $bottom: 0, $left: 0) { 
    .dropdown-element { 
     top: $top; 
     right: $right; 
     bottom: $bottom; 
     left: $left; 
     .content-wrapper { 
     .content, app-dropdown-content { 
      top: $top; 
      right: $right; 
      bottom: $bottom; 
      left: $left; 
     } 
     } 
    } 
} 

そして、あなたは持っている可能性があり：

&.pos-y-top { 
    @include distances(0, initial, 0, initial); 
} 

これは、いくつかのラインを救うことができます。さらに多くのパラメータを入れることができます。これは単なる例です。

Answer 2

私はこのように今それを行うが、私はわからない...それは少し汚いと私にundynamicなります

.dropdown { 
    @each $axis, $pos, $originX, $originY in 
        ('y', 'top', 'top', 'right'), 
        ('y', 'bottom', 'bottom', 'right'), 
        ('x', 'left', 'top', 'left'), 
        ('x', 'right', 'bottom', 'left') { 
    &.pos-#{$axis}-#{$pos} { 
     .dropdown-element { 
     @if($pos == 'top') { top: 0; } 
     @if($pos == 'bottom') { bottom: 0; } 
     @if($pos == 'left') { right: 0; } 
     @if($pos == 'right') { left: 0; } 
     .content-wrapper { 
      .content, app-dropdown-content { 
      @if($pos == 'top') { bottom: 0; } 
      @if($pos == 'bottom') { top: 0; } 
      @if($pos == 'left') { right: 0; } 
      @if($pos == 'right') { left: 0; } 
      transform-origin: #{$originX} #{$originY}; 
      } 
     } 
     } 
    } 
    } 
}