问题标签 [scss-mixins]

我想提高前端的质量标准，今天为背景图像部分构建一个小帮手：

.html

.scss

我试图创建一个 stackblitz，但后来意识到，我无法上传图像。因此，如果您需要一个演示来测试，请在根目录中创建 index.html 将是一个名为的文件夹assets/images/，并在那里放置 5 个名为 的文件background-720，background-1280等等...

好的，重点是我需要在这里：输入最后(min-width: $startFrom / 720 / 1280 / 1920 / 2560 / Last not need)一个@each的数量。就在第一个我需要使用$supports@each@each$startFrom

我知道它令人困惑。但我以前从未写过复杂的 SCSS Mixins。我希望有人可以帮助我。

从样式的角度来看，我可以实现我所需要的，但感觉就像我在复制很多代码。

我创建了一个非常小的示例，说明我正在尝试在更大范围内实现的目标。每个难度级别作为与其相关的颜色，用于不同的事物，如字体颜色、边框颜色、背景颜色等。

代码笔

我正在努力从@mixin 中将$ 变量传递/获取到@content。我在网上广泛阅读了有关它的信息，并且知道这是不可能的。但也许有人知道一个好的变化和/或其他解决方案。

我创建了一个 SassMeister 文件来解释它：https ://www.sassmeister.com/gist/f5404131ace6e243ef0a6c9cca042889

谁能帮帮我？感谢您与我们联系；-)

我有一个mixin，我在地图上循环。我的一些实用程序不适用于地图中的第一个或最后一个键。

有时，我可能会向地图添加新键。我可以使用 an@if="sm-2"直接检查键的值，但我也不想修改所有“for/each 循环”。

我如何知道/获取地图中的最后一个或第一个键？

我正在用 SASS 编写 HTML 模板。

我想要实现的是每当我的客户更改主模板颜色时，box-shadow 颜色也会更改并与模板颜色匹配。

我有一个主模板颜色变量和框阴影混合。

盒子阴影颜色

在这里，由于rgba颜色代码与主模板颜色不同。这将不起作用。所以我尝试通过以下两个选项来实现它。

方法一
我尝试用$template-color这样的东西替换rgba颜色

但问题是盒子阴影的不透明度需要非常柔和和透明。

示例框阴影图像在这里

如果不使用 RGBA 的不透明度，我无法实现它。

方法二
我也尝试像这样在$template-color后面添加一个 alpha hex。

方法二的问题是每种颜色都有自己的 alpha hex。它是动态的，我猜不出来。

我可以在不使用 javascript 的情况下实现它吗？

我有一个常用的组件，它的 scss 是这样的：

现在我希望所有东西在移动视图中都有相同的风格

但这不能改变移动视图中“指定用例”的样式。为了做到这一点，我必须

这对我来说似乎不正确。有没有更好的方法来定义移动视图 css 一次？

我想创建一组基于已定义对象的类，并带有成对的键和值。这些类的应用并不重要，但是为了这个问题，假设我想在某些视口和另一个视口上分配display值。blocknone

在代码中，所需的输出将是这样的：

我遇到的问题是第二个媒体查询条件（因此元素显示在某些尺寸之间，而不是向上或向下到特定尺寸）。

到目前为止我尝试了什么？

用预定义的断点声明对象：

并遍历对象，在尝试应用简单算术的同时创建适当的类

我希望该$breakpoint-down变量会降低迭代的索引（因此，如果我们在md，将继续sm，等等），但不幸的是它不会工作（甚至不会编译）。

如果我要删除第二个媒体查询条件，它会创建让元素对某些断点可见的类，但是就像我上面提到的那样，我希望它们仅在某些值之间应用样式。

我错过了什么？

我们暂时不用担心第一对和最后一对对象的边缘情况。;)

我在这里看到过类似的线程，人们解释了如何使用 SCSS 循环，但他们只处理列表，从不处理具有成对键和值的对象。

我正在尝试将几个参数传递到 SASS 语句中以最终在行上创建变体，但我并没有完全正确地获取映射键。

我的目标是获取 RowName、RowBGColor 和 RowText Color，同时将一些设置传递给我在 SASS 其他地方使用的附加 mixin。

我正在编写一个函数来按顺序淡入项目......

我有很多项目，我不想手动继续为下一个项目添加一个类。

我可以使用类似...的东西来迭代相同的规则吗？

?

我正在尝试创建 mixin。像这样的东西

但是出错了...有人可以帮助我吗？有可能做到这一点吗？