问题标签 [scss-mixins]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

514 问题

0 投票

0 回答

180 浏览

css - SCSS Margin-top 除非在嵌套类中，否则不起作用

我正在研究一个使用SCSS. 出于某种原因，当我把它margin-top: 0;放在父元素上时，它没有生效。当我把margin-top嵌套类放在里面时，它就起作用了。有人可以解释我做错了什么吗？以下是无法按预期工作的完整代码片段：

这是有效但设计不佳的代码片段：

最后，这是呈现的 HTML：

0 投票

0 回答

28 浏览

wordpress - Wordpress 主题开发 - 排队样式的问题

这是我第一次尝试创建 Wordpress 主题，所以我可能做错了什么。无论如何，发生了一些奇怪的事情，一些样式消失了（引导程序），但有一些 scss 文件 - url 指向主主题文件夹，但其中没有这样的文件。我想知道这些样式来自哪里，因为我实际上想保留这些样式作为我的主题的基础来自控制台的屏幕截图

wordpress scss-mixins

0 投票

2 回答

1102 浏览

twitter-bootstrap - Bootstrap 4：如何使用 SCSS 构建灵活的容器宽度，例如 container-sm-10

在我的日常工作中，我在一页上使用多个引导容器。我需要一个灵活的容器宽度。

Bootstrap 将像这样解决这个需求：

但这会破坏我的标记并使我的 CMS 中的模板变得有点困难。

我正在寻找一种速记，例如 container-md-10，其结果与上述相同：

如果默认引导值具有 12 个网格列 .container for md 是

我想要的 .container-md-10 将是

使用 SCSS 的自定义响应式标记的 Bootstrap 4 参考是

https://getbootstrap.com/docs/4.0/getting-started/theming/#responsive

这导致例如

根据这篇文章，您可以像这样构建自己的容器

如何在 Bootstrap 中引用 $container-max-widths

那么如何使用这些引用来构建我自己的具有 SCSS 的响应式容器类系统，如上所述？

这绝对是可能的，但超出了我在 Bootstrap 4 中的 SCSS 能力。

twitter-bootstrap sass css-selectors bootstrap-4 scss-mixins

0 投票

2 回答

228 浏览

css - Sass @each 和 @if/else 混合片段？

我是 Sass 的新手，我正在尝试获得这样的 CSS；

这是我的 SCSS 代码。但是所有的 heading-xx 类都得到 11.2rem。谁能给我指路？非常感谢。

css sass scss-mixins

0 投票

1 回答

142 浏览

css - 从less转换后出现scss语法问题

我的任务是将所有 less 转换为 scss 文件。我使用了 npm 依赖“less-scss-convertor”。

但是当我创建 scss 文件时，我反复遇到这三个错误。

第一种情况 - 在我的 common.scss 我已经定义

在我正在使用的其他一些 scss 文件中 -

error1 - "媒体查询表达式必须以'('开头"

第二种情况 - 在 color.scss -

错误 2 - "...te-color-class(": expected ")" 后的 CSS 无效，为 '"black", 1, 2);'

第三种情况——

错误 3 - 没有名为 vertical-translate 的 mixin

任何指示我哪里出错了？

css sass gulp-sass scss-mixins

0 投票

2 回答

60 浏览

html - CSS中带有em单位的响应宽度

我正在尝试制作一个自定义滑块，我已经找到了一个示例代码。我根据需要对其进行了一些定制，但无法适当地设置滑块范围元素的宽度。

em使用 SCSS 以单位定义大小和转换计算。我可以$track-w在 SCSS 中设置滑块的宽度，对于我的屏幕尺寸来说足够宽，但对于其他屏幕来说它会有所不同。下面是代码。

这是 codepen 链接 - https://codepen.io/thebabydino/pen/WdeYMd用于示例输出和更多详细信息。如何使滑块响应？如果我可以提供更多详细信息，请告诉我。

html css sass scss-mixins

0 投票

1 回答

205 浏览

css - 关键帧的混合

我正在尝试为关键帧做一个 mixin，并且它不断地闯入较新的 scss 编译器。

VS Code 一直在“0%”处向我显示一个错误，说“[scss] } expected”

不确定是什么问题。

css sass scss-mixins

0 投票

0 回答

102 浏览

javascript - 使用 node-sass 编译 CSS 时格式无效

使我的页面响应时出现错误。我正在使用@mixin 来实现这一点。

我收到一条错误消息，提示格式错误，应该在 'and' 之后有 '{'。我使用的是 Ubuntu，但相同的代码在 Windows 10 中没有显示出某种错误。

{ "status": 1, "file": "/opt/lampp/htdocs/my_portfolio/scss/_config.scss", "line": 34,
"column": 10, "message": "Invalid CSS after \" @mixin screen\": 预期 \"{\", 是 \"and (max-width:768p\"", "formatted": "Error: Invalid CSS after \" @mixin screen\": 预期 \"{\ ", 是 \"and (max-width:768p\"\n 在 scss/_config.scss 的第 34 行\n 从 scss/main.scss 的第 1 行\n>> @mixin 屏幕和 (max-width:768px ){\n\n ---------^\n" }

javascript css sass node-sass scss-mixins

0 投票

1 回答

1805 浏览