撰写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; 
}