Question

有没有办法在属性的值部分内使用Sass'@if语句？即使以下代码有效：

@mixin color-transition($color:true, $background:true, $border:true, $duration: 0.2s) {
    transition: 
        @if ($color) {
            color $duration linear,
        }
        @if ($background) {
            background-color $duration linear,
        }
        @if ($border) {
            border-color $duration linear,
        }
    ;
}

我无法在if子句中移动transition:，因为在这种情况下，最后一个会覆盖前者......

Answer 1

@mixin color-transition($color:true, $background:true, $border:true, $duration: 0.2s) {
    $transition : '';
    @if ($color) {
        $transition : 'color #{$duration} linear,'
    }
    @if ($background) {
        $transition : '#{$transition} background-color #{$duration} linear,'
    }
    @if ($border) {
        $transition : '#{$transition} border-color #{$duration} linear,'
    }
    @if (str-length($transition) > 0) {
        transition: unquote(str-slice($transition, 1, -2));
    }
}

然后您可以在任何CSS规则中@include color-transition()。测试

修改

现在，如果没有过渡，则不显示该属性，并且修复了错误。

Answer 2

你可以简单地连接答案并在之后打印出来......

@mixin color-transition($color:true, $background:true, $border:true, $duration: 0.2s) {
    $transition: ''; 
    @if ($color) {
        $transition: $transition + 'color #{$duration} linear';
    }
    @if ($background) {
        @if ($transition != ''){ $transition: $transition + ','; }
        $transition:  $transition + 'background-color #{$duration} linear';
    }
    @if ($border) {
        @if ($transition != ''){ $transition: $transition + ','; }
        $transition:  $transition + 'border-color #{$duration} linear ';
    }
    transition: unquote($transition);
}

但当然，你可以这样做：

@mixin color-transition($color:0s, $background:0s, $border:0s){
    transition: color $color linear, background $background linear, border $border linear;
}

允许您一次性调用它们：

@include color-transition(1s,1s,2s);

输出如下：

transition: color 1s linear, background 1s linear, border 2s linear;

由于默认值为0，从技术上讲，你没有为这些值设置转换，虽然它可能会覆盖其他地方的预设值，所以我明白为什么它可能不理想，只是一个想法。

Answer 3

你不能在这样的语句中使用控制指令。您必须在@if语句中附加一个字符串或列表变量，然后在最后写出已完成的属性。

通过传递要修改的属性列表，可以最好地解决您的特定用例：

@mixin color-transition($duration: 0.2s, $properties...) {
    $collector: ();

    // optional
    @if length($properties) == 0 {
        $properties: color, background-color, border-color;
    }

    @each $p in $properties {
        $collector: append($collector, $p $duration linear, comma);
    }

    transition: $collector;
}

用法：

.foo {
  @include color-transition();
}

.bar {
  @include color-transition(0.2s, color);
}

.buzz {
  @include color-transition(0.2s, background-color, border-color);
}

输出：

.foo {
  transition: color 0.2s linear, background-color 0.2s linear, border-color 0.2s linear;
}

.bar {
  transition: color 0.2s linear;
}

.buzz {
  transition: background-color 0.2s linear, border-color 0.2s linear;
}

允许可选持续时间的变化：

@mixin color-transition($properties...) {
    // optional
    @if length($properties) == 0 {
        $properties: color, background-color, border-color;
    }

    $duration: 0.2s; // default value

    $collector: ();
    @each $p in $properties {
        @if type-of($p) == number {
            $duration: $p;
        } @else {
            $collector: append($collector, $p $duration linear, comma);
        }
    }

    transition: $collector;
}

.foo {
  @include color-transition(color);
}

作为一种古怪的副作用，您可以指定每个属性的不同持续时间：

.bar {
  @include color-transition(color, 0.3, background);
}

如何将@if置于CSS属性的值内？

3 个答案:

修改