Question

我想知道是否有办法用Sass撰写/分解CSS简写。例如，我有：

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

我希望：

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

然后$someSpecificPadding的最终值为2px 2px 1px 2px。

Sass（scss）中是否存在任何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

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

编写CSS速记值Sass

2 个答案: