在SASS中編寫一個帶有變量的專門變換

Question

我有一個用例，我必須根據兩個變量在一個元素上定義變換：$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%); 
} 

然而，這似乎並沒有因爲改造工作將「重寫」。我真正想要做的就是使用ifin中的mixin來組成一個專門的轉換，最後將它們一起整理。

這將如何在sass中完成？

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%); } 

初始化局部變量$left-side和$right-side其可以作爲值被傳遞到transform

我使用此代碼簡化了mixin。它具有相同的行爲，唯一的區別是我使用翻譯版本作爲默認值而不是空字符串

@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; 
}