问题标签 [scss-mixins]

在 Bootstrap 4 中，我可以将text-truncate其用作元素中的类。例如：

我现在需要的是text-truncate在一个 scss 文件中为许多对象使用这个类，而不是直接在 .html 文件中编写它。

如何？

我可以使用类似的东西：

这会很棒！可能吗？

在以下场景中，我需要支持尽可能多的浏览器。

我正在构建一个以供应商前缀为前缀的 SCSS @mixin，background-image但还会监听linear-gradient是否声明了 a ，如果是，则也为其添加前缀。

我的代码如下所示：

用法和输出如下所示：

我的问题是，我的类型强制中出了什么问题导致我的linear-gradient供应商前缀被括在括号中并后跟逗号？例如(-moz-linear-gradient(45deg, red, blue),)。

我有以下 sass：

我得到：

但我想获得：

我需要第二个才能获得直系父母。我试过@at-root 但没有运气。

我有以下 HTML：

以及以下 SCSS：

这是可行的，但我希望它更易于维护/更易于阅读。如果可能的话，我希望它是这样的：

我的代码看起来像这样

但后来我得到这个错误：

模块构建失败：ModuleBuildError：模块构建失败：@import "maps/map-#{$i}"; ^ 找不到或无法读取要导入的文件：maps/map-#{$i}。

我使用 Laravel 5.6，我试过查找它，但到目前为止我没有找到任何东西。是否可以使用 scss 导入变量文件名？

我有两个不同的课程。一个是管理员，一个是用户。

我想做输入边框颜色动态。如果父类是 admin，则输入边框颜色为白色，如果父类为 user，则输入边框颜色为黑色。

这只是一个例子，在我的项目中有两种类型的登录，并且想在使用父类时改变很多东西。

在我正在使用 Bootstrap/SASS (SCSS) 开发的网站上，我希望使用媒体选择器而不是 JavaScript将 Bootstrap 按钮组 ( .btn-group) 变为垂直组 ( )。但是，在媒体选择器中不起作用.btn-group-vertical的众所周知的问题让我感到困惑。@extend例如，这会引发错误：

如果我从头开始开发，我会重写.btn-group并.btn-group-vertical简单地@include使用 mixin，这样我就可以执行以下操作：

我宁愿不更改原始引导_buttonGroup.scss文件，因为它将在下一次发布/更新时被覆盖。所以我目前需要复制并过去整个.btn-group-vertical定义：

有没有一种方法可以轻松地将现有的类定义转换为 Sass 中的 mixin 来解决这样的问题？

我使用了很多 SASS/SCSS，但通常不使用复杂的任何功能。我目前的需求似乎是一个函数的完美用例，但不确定如何在 SASS/SCSS 中像这样循环。

我需要一个阶梯式颜色模式来改变每个附加列表项的背景颜色。

我需要用各种基色重复这个任务，我希望有人可以帮助一个简洁的 SASS/SCSS 函数来替换这个 SCSS 块，它增加li:nth-child()1 (n+1) 并增加background-color: lighten($color, 5%)5% (5n ) 对于每个li.

让我知道是否需要任何澄清。非常感谢您的帮助和建议。

我需要能够使用 CSS 变量，因为我需要有一个悬停效果（背景颜色）才能由我的 VueJs 应用程序自定义。但是我的 CSS 样式表应该有一个默认值，它存储在嵌套的 SCSS 映射中。（map-getter 是一个从嵌套映射中返回值的函数）

我知道我的 SCSS 代码有效，因为这样做时我得到了预期的结果：

为了使用 CSS 变量，我可以修改代码如下：

它工作正常，悬停元素时我有一个红色背景。

然后我尝试将两者结合起来：

根据浏览器的控制台，这将返回以下内容：

所以似乎 SCSS 代码在 CSS 变量中仍未编译。有什么办法吗？

谢谢！

我在 index.scss 中使用了类似的东西：

但是 Chrome 对我说：

[Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be removed in M68, around July 2018. Please use '%23' instead. See https://www.chromestatus.com/features/5656049583390720 for more details.