撰寫CSS速記值Sass

Question

我想知道是否有一種方法可以用Sass編寫/分解CSS速記。例如，我有：

$standardPadding: 4px 2px 1px 2px; 

，我想有：

$someSpecificPadding: doSomething($standardPadding, top, 2px); 

那麼$someSpecificPadding最終值是2px 2px 1px 2px。

Sass（s​​css）或更少版本中是否存在doSomething？

Answer 1

您可以使用此代碼來實現你想要的結果

@function do_something($list, $args...) { 
    @each $mini-list in $args { 
    $value: nth($mini-list, 2); 
    $position: nth($mini-list, 1); 
    @if $position == top { 
     $list: set-nth($list, 1, $value); 
    } 
    @else if $position == right { 
     $list: set-nth($list, 2, $value); 
    } 
    @else if $position == bottom { 
     $list: set-nth($list, 3, $value); 
    } 
    @else if $position == left { 
     $list: set-nth($list, 4, $value); 
    } 
    } 
    @return $list; 
} 

該功能可用於在速記改變單個或多個位置值如下所示

$standardPadding: 4px 2px 1px 2px; 

//change both top and bottom values 
$standardPadding: do_something($standardPadding, top 18px, bottom 15px); 

h2 { 
    border-width: $standardPadding; //returns 18px 2px 15px 2px 
} 

h3 { 
    //changes only top value 
    border-width: do_something($standardPadding, top 12px); //returns 12px 2px 15px 2px 
} 

希望這會有所幫助。

Answer 2

您可以使用一個混合有點像這個

@mixin padding($top, $left: $top, $bottom: $top, $right: $left){ 
    padding-top: $top; 
    padding-left: $left; 
    padding-bottom: $bottom; 
    padding-right: $right; 
}