在Sass中将变量设置为\`mixin？

css CSS

Tony凯

2020-03-24

有没有办法设置@include mixin();变量？我试过了

@mixin bg-gradient($fallback, $type, $positionX, $positionY, $from, $from-percent, $to, $to-percent){
    background: $fallback;
    background: -webkit-#{$type}-gradient($positionX $positionY, $from $from-percent, $to $to-percent);
    background:    -moz-#{$type}-gradient($positionX $positionY, $from $from-percent, $to $to-percent);
    background:         #{$type}-gradient($positionX $positionY, $from $from-percent, $to $to-percent);
}

$navBg: @include bg-gradient(#eee, radial, top, center, #999, 0%, #555, 100%);
body { $navBg; } // it gave me an error

第3359篇《在Sass中将变量设置为\`mixin？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
神无 2020.03.24

如果尝试将返回值设置为SASS变量，则需要使用@function，而不是@mixin。这让我挂了一会儿，却没有意识到@function。例如...

@function font($font-size, $line-height: 1.4, $font-family: Arial) {

    @if $line-height == 1.4 {
        $line-height: round($line-height*$font-size);
    }

    @return #{$font-size}/#{$line-height} $font-family;
}

$font-medium: font(20px);

顺便说一句，尽管这不能完全满足该用户的需求，但这是互联网搜索中弹出的唯一一则关于将var设置为mixin的信息，所以我想在这里与其他人分享以了解如何做如果出现这种情况。

西门 2020.03.24

我不知道有什么具体的方法可以实现，但是如果您只是尝试在特定类型的渐变上干燥设置，则可以为其编写包装mixin：

@mixin navBg() {
    @include bg-gradient(#eee, radial, top, center, #999, 0%, #555, 100%);
}
body { @include navBg; }

编辑：

这是SASS变量支持的数据类型的列表。既不包括mixin调用，也不包括它们的结果（整个CSS规则）。我还尝试将include作为字符串处理并内插，但这仅适用于最终结果CSS，不适用于其他指令。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android