将列表元素作为参数传递给 mixin

2023-12-04

以下代码有效,除非我尝试通过$gradient to @include background-image.

@mixin compositeFill($size: 100px, $gradient:(top, #000000 0%, #FFFFFF 100%)) {

    $isTop: nth($gradient, 1) == "top";
    $direction: if($isTop, vertical, horizontal);
    $widthHeight: if($isTop, height, width);
    $heightWidth: if($isTop, width, height);

    // snipped a whole bunch of irrelevant stuff
    // this is what fails:
    @include background-image(linear-gradient($gradient));
}

如何传递列表(例如$gradient) 到需要多个参数的 mixin?


要将参数列表传递给接受多个参数的 mixin,您需要像这样使用它:

@include background-image(linear-gradient($gradient...));

the 三个点表示您要填充列表元素中的参数...否则整个列表将作为单个参数传递...并且linear-gradient()mixin 失败(因为它需要至少两个颜色停止参数)。

DEMO

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

将列表元素作为参数传递给 mixin 的相关文章

  • Angular 6 构建中的 style.js 是什么

    偷看html源代码 我使用 sass 使用 ng 6 构建 SPA 我找到了这些文件列表 我想知道 style js 是做什么用的 我正在
  • 使用 sass 3 自定义 Bootstrap 5 颜色时出现无效 CSS 值错误

    我想用 SASS 更改 bootstrap 默认主题颜色 问题是当我更改颜色并编译时 它会给我无效的 CSS 值错误 我已阅读文档并在 YouTube 上看到了一些教程 但我看不出问题出在哪里 我正在使用 bootstrap 5 1 0 s
  • 可以在 SASS / Compass 中创建随机数吗?

    我正在开发一个使用 SASS 和 Compass 的项目 并且需要以某种方式在 CSS 文件中得出一些随机数 具体来说 我需要一些 0 到 1 之间的浮点数 单独使用 SASS 和 Compass 可以吗 如果您创建一个 sass 函数 这
  • 如何在 ionic 4 中提供警报控制器 css?

    我想在 ionic 4 中提供警报控制器样式 这些是我的演示代码 async presentalert const alert await this alertCtrl create header DO YOU WANT TO CANCEL
  • 如何解决这个 sass 插值问题

    警告 您可能不想在此处进行插值时使用颜色值白色 它最终可能会呈现为白色 这可能会产生无效的 CSS 将颜色名称用作字符串或映射键时 请始终引用颜色名称 例如 白色 如果您确实想在此处使用颜色值 请使用 colorName 93 text c
  • SASS/SCSS 变量不适用于 CSS 变量赋值

    我有以下 SCSS 代码 mixin foo bar 42 xyzzy bar bar include foo 我希望得到 CSS 变量 xyzzy set to 42 on all bar元素 相反 我得到 CSS 说明bar xyzzy
  • Webpack 4:mini-css-extract-plugin + sass-loader + splitChunks

    我有以下示例配置来将 mini css extract plugin 与 Webpack 4 一起使用 entry a js a js scss a scss b js b js scss b scss module rules test
  • SASS:直系后代规则?

    如何在 SASS 中表示直接后代 CSS 规则 Ex body gt div 在文档中似乎找不到它 http sass lang com docs yardoc file SASS REFERENCE html http sass lang
  • Webpack 的 sass-loader 构建时间较慢

    Summary 当我们改用 Webpack 处理 SASS 文件时 我们注意到在某些情况下构建时间变得非常慢 使用以下方法测量构建的不同部分的性能后测速插件 https www npmjs com package speed measure
  • Sencha Cmd v4.0.2.67 创建后台进程失败

    我有一个使用 Sencha Command v4 0 2 67 生成的单页 ExtJS 应用程序 我正在尝试使用 Sencha Command v4 0 2 67 和以下命令进行构建 sencha app refresh sencha ap
  • NetBeans 7.4 中的 SASS

    我在 Windows 7 64 位 上使用 NetBeans 7 4 这样我就安装了 Ruby200 x64 这样我就可以使用 Sass scss 到 css CSS 预处理器在 NetBeans 中的配置如下 C Ruby200 x64
  • 创建一个跨浏览器 mixin 进行转换:旋转

    我想为 sass 创建一个 mixin 它将对指定元素应用旋转 mixin 应采用一个参数 表示要应用的旋转度数 从 css3please com 我找到了一种使用 CSS 实现此功能的跨浏览器方法 box rotate moz trans
  • 如何根据 Angular 中的全局 CSS 类名调整组件的 CSS?

    我们正在使用一个类html 判断用户是否在的元素dark or light应用程序的模式 这个类是使用添加的Renderer2在检测用户所选设置的服务中 到目前为止效果很好 现在 我们必须调整所有组件 以便在黑暗模式下也能看起来很好 但问题
  • Webpack中watch编译时加速scss的方法

    太长了 滚动到底部寻找答案 或者将 Webpack 和 Dart Sass VM 结合起来 https github com sass dart sass releases https github com sass dart sass r
  • 让 Compass 将供应商前缀添加到动画选择器

    谁能告诉我如何让 Compass 在编译时将供应商前缀添加到 CSS3 动画选择器中 我的配置文件如下所示 http path css dir sass dir images dir img javascripts dir js outpu
  • 无法在 Angular 4 中使用自定义主题

    我正在尝试在我的角度项目中使用我的自定义主题 它没有按预期工作 我收到以下错误 node modules css loader sourceMap false importLoaders 1 node modules postcss loa
  • 如何在Eclipse中集成CSS预处理? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想在 Eclipse 中编辑 SCSS 文件 最好使用语法突出显示 scss files 我发现这些资
  • 如何设置 CSS 网格的最大高度

    我有以下 CSS 网格 grid 3x4 display grid grid template columns 1fr 1fr 1fr grid template rows 1fr 1fr 1fr 1fr grid template are
  • 如何使用 Antd / Less 和 Sass / CSS 模块配置 Next.js

    我想用Next js https nextjs org 带有 Sass 和 CSS 模块但也想使用蚂蚁设计 https ant design 并希望对较小的建筑尺寸使用 Less 样式 我可以启用 CSS 模块或 Less 加载器 但不能同
  • Express.js“app.use()需要中间件功能”

    我正在学习 Express js 4 和 Node 但遇到了一个我无法弄清楚的错误 我正在尝试使用 node sass 包来编译我的 sass 代码 但我无法启动并运行它 这是我的主文件的精简版本 var express require e

随机推荐

  • 关闭 docker-compose 后 Docker 卷不保留数据

    我正在使用 docker compose 组合 2 个图像 tomcat 与我的应用程序和数据库 postgres 我的撰写文件如下所示 version 3 services tomcat build tomcat img ports 80
  • as_bytes 函数的精确定义

    我在阅读时发现了这个函数 但找不到它的定义CPP参考 Bjarne stroustrup 的编程原理 它的使用方式如下 ifs read as bytes x sizeof int 我明白如何read有效 但你仍然可以帮助我to bytes
  • 在 webkit 浏览器中使用 标签时,带有嵌入位图的 SVG 不显示位图

    我正在尝试使用带有嵌入位图的 SVG 作为导航元素 这个想法是让它更加适合移动设备 我已经为 IE8 及更低版本设置了 PNG 后备 不知何故 嵌入的位图不会在基于 webkit 的浏览器中显示 没有嵌入位图的 SVG 显示就可以了 我可以
  • 动态更改 Highstock 中的范围

    我想动态更改图表中的范围 如果我从大值变为小值 一切都会正常 但如果我想再去更大的地方 就什么也不会发生 你可以在这里尝试一下 http jsfiddle net Charissima wkBwW 15 单击按钮 Range 50 然后单击
  • 使用 python 进行敏感性分析

    我正在尝试执行敏感性分析 并且我开始学习 python 所以我想在 python 中完成此任务 我发现了一个名为SALib但我真的不知道如何实现我自己的方程 例如 这是我的等式 ET 0 0031 C R 209 t t 15 1 首先我必
  • 使用 jQuery 从子域获取 JSON

    I have user1 mydomain com and user2 mydomain com域 我用api mydomain com通过 AJAX JSON 处理我的 Web 应用程序 所以 我想发出一个 POST 请求user1 my
  • 拨打号码时启动我的应用程序

    我想在拨打新号码或联系人号码时将我的应用程序显示为一个选项 我已关注这个话题 我有一个具有单一活动的应用程序 这是清单文件
  • 如何在 MySQL 中搜索 Soundex() 子字符串?

    我的 Joomla 有问题 3 集成搜索引擎 该引擎的索引器在索引内容时创建所谓的 soundex values 例如 测试对象 测试对象1 测试对象2239923 文本对象 它们都具有相同的 soundex 值 T23123 现在我的问题
  • 使用 C# 更改文件扩展名

    我有很多文件类型 pdf tiff jpeg bmp ETC 我的问题是如何更改文件扩展名 我试过这个 my file c my documents my images cars a jpg string extension Path Ge
  • PHP 脚本(嵌入式或其他形式)的安全性

    我对嵌入 PHP 代码的 HTML 网页 以 webpage php 形式存在于服务器上的网页 或可能被 HTML 页面引用的 PHP 脚本 即 PHP 脚本实际上不是网页的一部分 以 something php 形式存在于服务器上 并由
  • 使用 crontab 运行 PHP 脚本

    我知道 SO 是针对问题的 但无论我查了多少教程 我都无法得到我的crontab工作 我正在建立一个网站 该网站将依赖于crontab每天晚上重置我的数据库中的特定设置 这是我的crontab file Edit this file to
  • 如何在结构体字段中表示不透明类型

    我正在使用 genawater 箱来实现生成器函数 单线程 多任务 我有这段代码来创建一个新线程 并向其传递一个生成器 但我正在努力 找到如何表示impl Future输入那个gen 返回 use genawaiter rc gen Gen
  • getView 中的自定义 ArrayAdapter setBackground

    我正在开发一个 ListActivity 它将显示一堆数字 权重 我想更改 ListView 中特定行的背景 为此 我创建了 ArrayAdapter 类的自定义实现 并重写了 getView 方法 该适配器接受数字列表 并将数字 20 的
  • Firebase:对大型数据集的查询

    我正在使用 Firebase 来存储用户个人资料 我尝试在每个用户配置文件中放入最少量的数据 遵循有关结构化数据的文档中建议的良好实践 但由于我有超过 220K 个用户配置文件 因此在以 JSON 格式下载所有用户配置文件时 它仍然代表 1
  • Python - 在图中寻找模式

    该图是由以下生成的gnuplot脚本 这estimated csv文件可以在此链接中找到 https drive google com open id 0B2Iv8dfU4fTUaGRWMm9jWnBUbzg GNU Plot set st
  • 检查 Bash 数组是否包含值

    在 Bash 中 测试数组是否包含某个值的最简单方法是什么 这种方法的优点是不需要循环所有元素 至少不需要显式循环 但是由于array to string internal in array c仍然循环遍历数组元素并将它们连接成一个字符串
  • 使用带有管道输入的 gdb 而不创建文件

    我有一个接受管道输入的程序 bash gt echo something program seomthingelse 如何将此输入重定向到 gdb 而不创建新文件 如何将此输入重定向到 gdb 而不创建新文件 您可以创建一个命名管道 不确定
  • Spring中将变量传递给@Qualifier注解

    Spring中是否可以将变量传递给 Qualifier注解 例如 Autowried Qualifier datasource jobParameters datasource number private DataSource ds 我有
  • ios8 的 Parse 推送通知没有声音

    我在向 iOS8 设备推送通知时遇到问题 一切正常 但推送没有响铃 只出现在屏幕上 我通过仪表板发送正常推送 默认情况下启用声音 我在iPhone4 iOS 7 1 2 iPhone5 iOS 7 0 4 上测试 工作正常 但在iOS 8的
  • 将列表元素作为参数传递给 mixin

    以下代码有效 除非我尝试通过 gradient to include background image mixin compositeFill size 100px gradient top 000000 0 FFFFFF 100 isTo