以下scss能够优化吗?

// 内凹圆角
@mixin sunken-radius($c, $s, $b, $a: "") {
    &::before,
    &::after {
        content: " ";
        display: block;
        position: absolute;
        width: $s + "px";
        height: $s + "px";
        background-repeat: no-repeat;
    }
    %tl1 {
        left: 0;
        top: -$s + "px";
        background-image: radial-gradient(
            circle at $s 0,
            transparent $s - 1,
            $c $s
        );
    }
    %tl2 {
        left: 0;
        top: 0;
        background-image: radial-gradient(
            circle at $s $s,
            transparent $s - 1,
            $c $s
        );
    }
    %tl3 {
        left: -$s + "px";
        top: 0;
        background-image: radial-gradient(
            circle at 0 $s,
            transparent $s - 1,
            $c $s
        );
    }
    %tr0 {
        right: 0;
        top: -$s + "px";
        background-image: radial-gradient(
            circle at 0 0,
            transparent $s - 1,
            $c $s
        );
    }
    %tr2 {
        right: -$s + "px";
        top: 0;
        background-image: radial-gradient(
            circle at $s $s,
            transparent $s - 1,
            $c $s
        );
    }
    %tr3 {
        right: 0;
        top: 0;
        background-image: radial-gradient(
            circle at 0 $s,
            transparent $s - 1,
            $c $s
        );
    }
    %br0 {
        right: 0;
        bottom: 0;
        background-image: radial-gradient(
            circle at 0 0,
            transparent $s - 1,
            $c $s
        );
    }
    %br1 {
        right: -$s + "px";
        bottom: 0;
        background-image: radial-gradient(
            circle at $s 0,
            transparent $s - 1,
            $c $s
        );
    }
    %br3 {
        right: -$s + "px";
        bottom: 0;
        background-image: radial-gradient(
            circle at $s 0,
            transparent $s - 1,
            $c $s
        );
    }
    %bl0 {
        left: -$s + "px";
        bottom: 0;
        background-image: radial-gradient(
            circle at 0 0,
            transparent $s - 1,
            $c $s
        );
    }
    %bl1 {
        left: 0;
        bottom: 0;
        background-image: radial-gradient(
            circle at $s 0,
            transparent $s - 1,
            $c $s
        );
    }
    %bl2 {
        left: 0;
        bottom: -$s + "px";
        background-image: radial-gradient(
            circle at $s $s,
            transparent $s - 1,
            $c $s
        );
    }
    @if $b == "tl1" {
        &::before {
            @extend %tl1;
        }
    } @else if $b == "tl2" {
        &::before {
            @extend %tl2;
        }
    } @else if $b == "tl3" {
        &::before {
            @extend %tl3;
        }
    } @else if $b == "tr0" {
        &::before {
            @extend %tr0;
        }
    } @else if $b == "tr2" {
        &::before {
            @extend %tr2;
        }
    } @else if $b == "tr3" {
        &::before {
            @extend %tr3;
        }
    } @else if $b == "br0" {
        &::before {
            @extend %br0;
        }
    } @else if $b == "br1" {
        &::before {
            @extend %br1;
        }
    } @else if $b == "br3" {
        &::before {
            @extend %br3;
        }
    } @else if $b == "bl0" {
        &::before {
            @extend %bl0;
        }
    } @else if $b == "bl1" {
        &::before {
            @extend %bl1;
        }
    } @else if $b == "bl2" {
        &::before {
            @extend %bl2;
        }
    }
    @if $a != "" {
        @if $a == "tl1" {
            &::after {
                @extend %tl1;
            }
        } @else if $a == "tl2" {
            &::after {
                @extend %tl2;
            }
        } @else if $a == "tl3" {
            &::after {
                @extend %tl3;
            }
        } @else if $a == "tr0" {
            &::after {
                @extend %tr0;
            }
        } @else if $a == "tr2" {
            &::after {
                @extend %tr2;
            }
        } @else if $a == "tr3" {
            &::after {
                @extend %tr3;
            }
        } @else if $a == "br0" {
            &::after {
                @extend %br0;
            }
        } @else if $a == "br1" {
            &::after {
                @extend %br1;
            }
        } @else if $a == "br3" {
            &::after {
                @extend %br3;
            }
        } @else if $a == "bl0" {
            &::after {
                @extend %bl0;
            }
        } @else if $a == "bl1" {
            &::after {
                @extend %bl1;
            }
        } @else if $a == "bl2" {
            &::after {
                @extend %bl2;
            }
        }
    }
}

制作内凹圆角用的,四个角,每个角有三种圆角状态,但代码好长,有办法优化吗?

阅读 826
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进