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等属性的列表。

如何在SASS中获得紧凑形式的垂直填充？

1 个答案: