SASSで変数を使用した特殊なトランスフォームを作成

Question

私は、2つの変数、すなわち$horizontalと$verticalに基づいて要素にトランスフォームを定義する必要があるユースケースがあります。

しかし、私は最終的にこれらを変換で使用します。つまり、各変数を手動で定義することはできません。以下のように疑似コードで

、それはなります

@mixin pivotTranslate($horizontal, $vertical) { 
    @if $horizontal = 'left' 
    transform: translateX(-100%); 
    @else if $horizontal = 'right': 
    transform: translateX(100%); 

    @if $vertical = 'top': 
    transform: translateY(100%); 
    @else if $vertical = 'bottom': 
    transform: translateY(-100%); 
} 

をしかし、これは、変換動作するようには思えない「上書き」されます。私が本当にやりたいことは、特殊なトランスフォームを作成するためにifsを使ってmixinを使用し、最後に一緒にスプールすることです。

これはどのようにして胸の中で行われますか？

Answer 1

@mixin pivotTranslate($horizontal, $vertical) { 
    $left-side: ''; 
    $right-side: ''; 

    @if $horizontal == 'left' { 
    $left_side: translateX(-100%); 
    } 
    @else if $horizontal == 'right' { 
    $left_side: translateX(100%); 
    } 

    @if $vertical == 'top' { 
    $right-side: translateY(100%); 
    } 
    @else if $vertical == 'bottom' { 
    $right-side: translateY(-100%); 
    } 

    transform: $left-side $right-side; 
} 

div { 
    @include pivotTranslate('left', 'top'); 
} 

/* CSS output generated */ 
div { 
    transform: translateX(-100%) translateY(100%); } 

私はこのコードを使用してmixin簡略transform

に値として渡すことができるローカル変数$left-sideと$right-sideを初期化します。唯一の違いは、空文字列の代わりにデフォルト値としてバージョンを使用したことです。

@mixin pivotTranslate($horizontal, $vertical) { 
    $left-side: translateX(-100%); 
    $right-side: translateY(100%); 
    @if $horizontal == 'right' { 
    $left_side: translateX(100%); 
    } 
    @if $vertical == 'bottom' { 
    $right-side: translateY(-100%); 
    } 
    transform: $left-side $right-side; 
}