问题标签 [scss-mixins]

我正在使用以下 SCSS 混合

我期待以下结果

但是我明白了

解释

这两个代码块之间的区别在于'='符号之后的第一行。我希望该值评估为带引号的字符串，但即使我使用Quote SCSS Function也不会。我将其插入 Ionic 但这与样式无关，它仅适用于引号。

实验

您可以在SassMeister测试以下代码

我有一张彩色地图，我只需要使用该函数返回这张地图的键。但我只能返回第一个键名。我尝试将所有键的名称称为部分颜色、树线颜色、表格标题颜色、表格单元颜色。但我不能。请帮我。

我有两个 SCSS 地图调用$my-map-1和$my-map-2. 每个地图都有带有十六进制值的键。我编写了一个函数来分别返回每个映射的键和十六进制值（$key, $value）。

之后，我@if用我的函数写了一个条件来检查地图。我将我的地图名称传递给函数。如果在那里映射，则检查是否$key等于给定名称。如果这是真的，请将其传递$valu给$key我的颜色混合。这是我的代码。

主题变量.scss

组件.scss

但是颜色仍然是红色 我的问题是：如何在 scss 中设置全局变量并在 mixin/function 中更改它并在任何 component.scss 中使用它

我有一个 Angular CLI 应用程序，我正在@import '~@angular/material/theming';全球范围内使用styles.scss. 我还有一个组件，我想在该组件的 .scss 文件中定义一个 css 类，该文件使用一些 Angular Material 排版：

通过在我的应用程序中多次导入~@angular/material/theming，它是否会多次包含该 css 并使我的有效负载膨胀？还是 Angular CLI 编译器足够聪明来处理这个问题？

我正在尝试用 4 个单元格创建一行，但我不知道它为什么不起作用。

我创建了一个父母row和 4 个孩子。

（忽略类的类名，因为我正在使用反应）

和CSS属性是：

它的作用是计算总宽度，然后减去边距，然后除以 4。从技术上讲，它应该可以工作，我应该能够连续看到 4 个单元格。但我得到的结果是，连续 3 个单元格和下一行的第四个单元格。

结果应该是这样的

hi hi hi hi

但实际结果是

hi hi hi hi

这是工作代码 https://codepen.io/sarmad1995/pen/REYXBV?editors=1100

是否可以仅使用 SCSS 而不是 JS 来设置相对于另一个元素的字体大小的字体大小？

例如，我想让段落文本比输入小 2 个像素。

我尝试过这样的事情，但它似乎不起作用：

HTML

SCSS

在我的 component.scss 文件中，我有 mixin 变量，我正在尝试为 div 元素设置波纹颜色。

如果我在 HTML 中设置直接颜色值，例如：[matRippleColor]="red"，则波纹颜色已应用并正常工作。

但是，如果我将mixin 变量的名称或scss 类名称赋予 [matRipplecolor]，则不会应用波纹颜色。

component.scss飞

component.html飞

需要从 scss 文件中的 mixin 变量设置波纹颜色

我遇到了一个奇怪的问题，我不熟悉使用@mixinand@content标签和一般的 sass，但由于某种原因，我grid-template-areas不能准确地代表我想要他们做什么。

HTML

SCSS

看到这个问题...... jsfiddle

它应该从将标题分成 2 列到将标题分成 5 列；

我是 sass 的新手，目前正在探索它。我想尝试使用 mixin，但是当我尝试它时，它就是行不通。这是代码：

所以我有一个 div 和 class 容器，想把 mixin 放在那里，但它就是不工作。有人可以帮忙吗？？