sass - 如何在 SASS 中从紧凑形式中获取垂直填充？

Question

我正在扩展现有的 SASS 主题(实际上是 bootswatch 主题)，我需要从这样的变量集中提取垂直填充:

$panel-heading-padding:       10px 15px !default;

我需要这样的东西:

$my-vertical-padding: vertical($panel-heading-padding);

我已经检查了引用文档，但似乎没有任何记录。

这可能吗(不使用子字符串)？

Answer 1

在寻找与您相同的答案后，我最终编写了一个用于此目的的基本函数:

@function extract-from-compact ( $value, $side ) {
    $index: 1;

    // Top values are always at index 1. The same for when the list has only one item
    @if ( $side == top or length( $value ) == 1 ) {
        $index: 1;
    }
    // Covers "vertical horizontal" style
    @else if ( length( $value ) == 2 ) {
        @if ( $side == left or $side == right ) { $index: 2; }
        @if ( $side == bottom ) { $index: 1; }
    }
    // Covers "top horizontal bottom" style
    @else if ( length( $value ) == 3 ) {
        @if ( $side == left or $side == right ) { $index: 2; }
        @if ( $side == bottom ) { $index: 3; }
    }
    // Covers "top right bottom left" style
    @else if ( length( $value ) == 4 ) {
        @if ( $side == right ) { $index: 2; }
        @if ( $side == bottom ) { $index: 3; }
        @if ( $side == left ) { $index: 4; }
    }

    @return nth( $value, $index );
}

// Usage
body {
    padding-top: extract-from-compact( $padding-list, top );
}

上面的一些评论解释了使用的逻辑。
请注意，此函数仅适用于使用 margin、padding 等属性的列表