问题标签 [scss-mixins]

我想在 SCSS 中做一组颜色

使用这个数组，我想为每一列着色。假设列的最小值为 4，最大值为 10，因此数组中定义的颜色应该重复。

我认为我们有一个非常好的方法可以在 SCSS 上做到这一点。

我正在升级到 Ionic 4。如何在全局范围内导入 mixin，并且必须在每个使用 mixin 的 sass 中导入文件？我试过编辑angular.json，global.scss但variables.scss没有运气。

它应该使用行将导入添加到全局@import "./mixins";。我尝试将其添加为第一行和最后一行。

我想生成具有以下格式的媒体查询网格：

我使用第一个大型/桌面方法，带有浮动。它是有意使用的，而不是移动优先的方法。

从以下网格配置映射开始：

对于 map(lg) 中的第一个元素，我不想添加媒体查询。

第一个元素可以改变，所以如果可能的话我不想做一个字符串检查(if bp !=='lg')（不像我的代码）

我有以下 mixin 来生成媒体查询：

和另一个生成网格的mixin：

}

然后我使用：

但这会生成以下格式col--sm-1而不是col-1@sm.

我遇到的问题：

• 将 cols 保留在媒体查询集中，并在最后添加媒体。
• 与动态中的第一个比较grid-config，检查if $bp == first in map，而不是lg

我有一个添加后粒子的地图生成器：

我在多种情况下使用了上面的 mixin 在末尾添加了粒子，例如：

我收到以下错误：

“&-none”后的无效 CSS：预期的选择器，是“@”\n

我想要的是：

这仅在我我们时出现\@。

我可以在创建类时添加这个粒子，但是就像我说的我想在多种情况下使用它并根据条件改变粒子，所以我需要在 mixin 中。

我想创建一个这样的结构

这是我的 sass 代码

但是填充总是相同的（2rem）而不是 2rem, 3rem, 4rem, ....

有人可以告诉我为什么吗？

我有以下 SCSS mixin，它从.grid1to生成 CSS 类.grid12：

使用 libsass 生成的 CSS 类如下所示：

由于 IE 11 不支持grid-gap我想在生成的列之间插入 20px 间隙列。

预期结果如下所示：

简单地20px在重复字符串中添加列会导致不需要的尾随20px：

结果是

任何想法如何使用 SCSS mixins 获得所需的结果？

为了方便测试，只需将 mixins 粘贴到sassmeister上即可。

当我制作类包时，我使用 mixins 和 % 类，就像在 vars 中这样：

然后我可以以相同的名称扩展它以在现场使用它：

或在组件中：

但是，如果我使用 % 类，当我运行本地站点时会有太多可重复的类：

太多相同的课程

这很烦人，是的，在 prod 上缩小后它们会消失，但现在它们真的会干扰。我能用它做什么？

UPD 我知道，如果我将 %name-of-class 更改为

它会有所帮助，但我不想这样做，因为代码不会那么优雅）

UPD2 我不能使用循环来从大量混合中：https ://github.com/sass/sass/issues/626

当我使用我的 mixin 时，我的 sass 文件看起来像这样：

但是我想要那个类和带有@sm、@md 的类……我可以用 sass 来做吗？

我试图在包含主题混合时设置全局变量，因为它似乎比我从搜索中找到的“主题化”内容更直接使用。

这个想法就像有_themes.scss一个

问题是它总是使用 dark-theme 值，因为它是最后声明的。我正在尝试做的事情可能吗？

我有三个 mixin，每个都由一个不同的背景图像 SVG 组成，该图像具有传递给它们的颜色（简化示例）：

然后，我尝试通过执行以下操作在编译时随机选择其中的任何三个：

这给了我一个编译错误：

我在这里使用了错误的语法还是这不是处理这个问题的正确方法？