在SASS中编写一个带有变量的专门变换

问题描述：

我有一个用例，我必须根据两个变量在一个元素上定义变换：$horizontal和$vertical。在SASS中编写一个带有变量的专门变换

但是，我最终会在变换中使用这些变量，这意味着我无法手动定义每个变量。

伪代码，它看起来如下：

@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中完成？

答

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

在SASS中编写一个带有变量的专门变换

相关推荐