问题标签 [scss-mixins]

我有一个mixin，我引用一个“元素”作为参数。

如果我引用一个a或一个p例如，这很好用

HTML

SCSS

但我也想将mixin用于伪元素，例如。

或者

这可能吗？为什么我正在做的事情让 SCSS 不开心:-(

我试图抑制与 Visual Studio 中的 SASS 文件相关的特定错误。我会提到一切都很好，CSS文件的生成与SASS文件应该生成的完全一样，即使在VS上出现这个错误，所以我认为这可能是VS上的一个错误。

基本上我正在做的是我有 2 个 SASS 文件，我在其中声明了一些变量作为另一个 SASS 文件的设置，该文件包含一些根据上下文中提供的设置文件工作的混合。

例如，这些是设置的 2 个文件：

_settings-ltr.scss

_settings-rtl.scss

这是使用这些设置的文件：

_mixins.scss

现在，基本上错误表明变量“$bi-app-left”未定义（以及“$bi-app-right”），我真的没有在“_mixins.scss”文件中定义这些变量，我将它们传递给其他一些 SASS 文件中的上下文，如下所示：

网站.scss

它工作得很好，除了来自VS的错误：

我的问题

如何在不禁用其他 SASS 文件错误的情况下专门禁用此错误？

我发现 SASS 语法比 SCSS 更简单、更简洁，但是文档没有那么广泛和完整，所以我经常遇到浪费时间的语法错误。许多提到 SASS 的文章实际上只包含有关 SCSS 的信息。甚至官方的 SASS 文档 ( https://sass-lang.com/documentation/file.SASS_REFERENCE.html#if ) 也包含显然只引用 SCSS 的示例。例如，mixin 中条件语句的 SASS 语法是什么？例如：

此示例无法正确编译：该if语句被忽略并且border-color生成的 CSS 中没有。

是否有人知道有用的网站，其中包含 SASS 语法的文档和示例或在线从 CSS/SCSS 转换为 SASS 的工具？

我找到并更改了一些代码，以便我可以使用它，但我缺少一件事。

这是我的网格。我不能使用引导程序，所以我自己做了。从这里，我得到了这个 css。我将粘贴 css 用于桌面视图，因为它们的工作原理相同。

我需要反转输出。例如 col-1 应该是width: 8.33333%;或 col-12 应该是width: 100%;。基本上，我需要颠倒数字，但无论我如何尝试，总是一样的..

# 在 SCSS 中是什么意思。我只是想明白这意味着什么。

编辑：

我只是想多了。现在我像这样向 mixin 添加了更多变量以使所有颜色正确：

我有一个 WordPress 页面，我在其中使用 SCSS 混合来简化按钮上不同颜色的使用。大多数按钮都具有相同的边框颜色和带有透明背景的文本颜色，所以我创建了这个 mixin 来处理这个问题：

这是我输出它的css：

这一切都很好，但现在客户想要一个使用彩色背景的按钮，例如。带有蓝色背景颜色和白色文本的按钮。我想以最好的方式做这个混入，而不是重复我的代码，但我似乎无法弄清楚如何让这个混入以我想要的方式与彩色背景一起工作（也许我正在这样做错了……）

我应该对$transparent变量使用条件语句吗？

我很难理解 SCSS 变量参数。如此处所示，很容易理解您可以添加多个参数。

但我不明白我怎么能用地图做到这一点。

例如：

我有这张地图：

我正在编写一个函数来控制间距：（很可能是超级错误）

我想要的是能够将函数调用为：

输出为：

没有地图，它可以很容易地完成，但有了地图我该怎么做呢？

谢谢

我对 npm 和 SCSS 没有太多经验，所以我有以下问题：

我有一个 SCSS (app.scss) 文件，其中有很多地方我使用一种默认颜色作为背景。我的想法是有一个变量 $background_color 以便我可以轻松更改该颜色。有可能吗？如果可以，怎么做？

这是我的 mix.js 的代码：

我需要创建动态类，我正在为其创建一个 scss 代码来为所有可能的值创建类。以下是我的代码： -

我希望它以 :-

为 rgba() 插值而苦苦挣扎。否则它会得到我想要的确切值。如果您在https://www.sassmeister.com/中查看我的代码，您会看到它。

引用我的资料，我正在将Metro-UI中的磁贴功能转换为我正在构建的自定义 SCSS/Angular 项目。到目前为止，我已经能够通过查看 mixins、include 和变量来将其中的大部分转换为 1:1。但是，在列排列方面，我并没有关注 Metro 团队在本节中所做的事情。他们的原始代码（来自他们的 LESS 文件- 第 243 行）：

到目前为止我的转换：

这当然是导致问题的“何时”声明。我从类似的问题中了解到，我可能需要使用“for”或“each”语句并从那里分解，但是当我查看类似的答案时，语法规则是非常不同的逻辑（比如这个）。由于我没有编写原始 LESS 语法，因此我试图通过他们的逻辑向后工作以确定其 SCSS 等效项。

据我所知，它试图确定如果/当 I 和 K 的两个值不同时如何分散网格，但是由于您无法基于 SCSS 中的条件变量创建新类，所以我被绊倒了向上。我会很感激任何指导。这是我的代码中不能编译的最后一部分。