无法将函数作为参数传递给 mixin [重复]

2023-12-20

我正在尝试在 Sass 中创建一个 mixin 以用于 :hover 操作,但我无法使其工作。

我声明 mixin:

@mixin hover($action, $color, $amount) {
    color: $action($color, $amount);
}

我的想法是使用Sass 脚本函数 http://sass-lang.com/documentation/Sass/Script/Functions.html#darken-instance_method通过基本上变亮或变暗来更改悬停时链接的颜色。例如我尝试:

a {
    &:hover {
        @include hover(darken, $footer-text-color, 5%);
    }
}

$footer-text-color是我之前定义的一个变量,它等于十六进制颜色,例如#84b3c8。

我希望这与

 a {
    &:hover {
        color: darken($footer-text-color, 5%);
    }
}

相反,它用纯 CSS 编译的内容是:

color: darken #84b3c8, 5%;

很明显,颜色功能不起作用,但真诚地我不明白为什么。我确信这很愚蠢,也许是 mixin 参数中变量和字符串值的混合?


函数和 mixins 不是头等舱在 Sass 中,这意味着它们不能作为参数传递给其他函数或 mixin。

在Sass 3.3中,有一个新函数叫做call()这将为您提供您正在寻找的行为:

@mixin hover($action, $color, $amount) {
    color: call($action, $color, $amount);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

无法将函数作为参数传递给 mixin [重复] 的相关文章

  • Webpack 的 sass-loader 构建时间较慢

    Summary 当我们改用 Webpack 处理 SASS 文件时 我们注意到在某些情况下构建时间变得非常慢 使用以下方法测量构建的不同部分的性能后测速插件 https www npmjs com package speed measure
  • 在 Sass mixin 中跳过可选参数

    我有这个 mixin 来处理简单的 CSS3 线性渐变 mixin linear gradient from to dir bottom dir webkit top ie filters false background color to
  • 如何在vue中覆盖materializecss sass变量?

    我想改变物化中的变量 变量 scss https github com Dogfalo materialize blob master sass components variables scss e g primary color col
  • 修改变量后动态重新导入 Sass 部分

    我正在开发一个利用 Sass 预编译的 Twitter Bootstrap 的项目 每次覆盖变量时 我都必须重新导入 bootstrap sass文件到我的项目主样式表以使覆盖生效 您是否知道如何使此过程自动进行 以便每次修改变量时立即生效
  • 创建一个跨浏览器 mixin 进行转换:旋转

    我想为 sass 创建一个 mixin 它将对指定元素应用旋转 mixin 应采用一个参数 表示要应用的旋转度数 从 css3please com 我找到了一种使用 CSS 实现此功能的跨浏览器方法 box rotate moz trans
  • 使用 SASS 切换用户主题 - Ruby on Rails

    所以我有一个 Rails 管理系统 允许用户选择一个主题 基本上是一组 SASS 颜色变量 它将使用新颜色重新编译 application css scss 当用户从下拉菜单中选择并提交时 更改此设置的最佳方法是什么 我阅读了一些有关缓存和
  • 无法在 Angular 4 中使用自定义主题

    我正在尝试在我的角度项目中使用我的自定义主题 它没有按预期工作 我收到以下错误 node modules css loader sourceMap false importLoaders 1 node modules postcss loa
  • 如何使用 Bourbon Neat Framework 实现移动优先

    我一直在使用 bourbon clean 来进行桌面优先布局 效果很好 不过 我想做一个移动优先版本 从移动开始 然后逐步向上 默认网格为 12 列 对于移动设备 我通常使用 4 列网格 我尝试将网格更改为 4 列 然后扩展到 12 列 但
  • 在 Java 中实现 Mixin? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 使用Java 6 我如何实现mixin https en wikipedia org wiki Mixin 在 Ruby 中这非常简单
  • 如何在Eclipse中集成CSS预处理? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想在 Eclipse 中编辑 SCSS 文件 最好使用语法突出显示 scss files 我发现这些资
  • 样式标签中的源映射是否有效?

    我在标签和源映射中遇到 CSS 问题 为了缩短项目的加载时间 我改变了将 CSS 放入 HTML 的方式 将其改为 h1 Source maps working wonderfully h1 进入这个
  • 有没有办法将变量从 javascript 导入到 sass 或反之亦然?

    我正在制作一个依赖于块概念的 CSS 网格系统 所以我有一个基本文件 例如 max columns 4 block width 220px block height 150px block margin 10px 它被 mixin 使用 m
  • 如何设置 CSS 网格的最大高度

    我有以下 CSS 网格 grid 3x4 display grid grid template columns 1fr 1fr 1fr grid template rows 1fr 1fr 1fr 1fr grid template are
  • 使用 SASS(从命令行)和 Autoprefixer(对于 Bootstrap 4.x)

    我最近开始使用scss文件 尤其是自定义文件引导程序 为了编译我的 scss 文件 以及引导程序 我使用sass https sass lang com 从命令行 例子 sass path to scss bootstrap mycusto
  • 导入的Sass文件找不到字体文件

    我正在使用 gatsby plugin sass 来包含我的 sass 文件 我有一个web animations sass导入的文件 typography sass My typography sass有一个像这样的字体声明 font f
  • Sass 与 BEM,继承选择器

    我正在使用 Sass 3 4 1 和 BEM 所以我的 scss 是 photo of the day title font size 16px 我希望每次将鼠标悬停在 photo of the day标题发生了一些事情 这很常见 所以通常
  • Bootstrap 使用 SASS 和 fontawesome 图标分隔符修改面包屑

    所以我正在尝试更改默认值breadcrumb与 SASS 的风格 我已经按照官方 Bootstrap 4 beta 3 文档中提到的方式设置了所有内容 我更改了以下内容custom scss breadcrumb divider f105
  • 在 SCSS 部分中使用 Rails 3.1 资源路径

    我有以下设置 app assets stylesheets application css scss require self require fancybox COLORS MIXINS FONT STACKS IMPORTS impor
  • 是否可以在 C# 中实现 mixin?

    我听说可以使用扩展方法 但我自己不太明白 如果可能的话我想看一个具体的例子 Thanks 这实际上取决于 mixin 的含义 每个人似乎都有稍微不同的想法 我想要的那种 mixinlike看看 但在 C 中不可用 使通过组合实现变得简单 p
  • 如何在 SASS CSS 中的 Bootstrap 4 中获取 15 列?

    我有一个明确为 1200px 15 cols 框架设计的布局设计 但我的客户只想将 Bootstrap 4 与 SASS 一起使用 是否有可能将 Bootstrap 转换为 15 列布局 我在网上没有看到这样的例子 我不太喜欢小型项目的 B

随机推荐