问题标签 [less-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.

0 投票
0 回答
228 浏览

css - Bootstrap 3 translate3d mixin问题

我对下一个问题感到头疼。我为我的网站使用 Bootstrap 3 vendor-prefixes.less来生成 CSS 前缀。

我想生成以下代码:

通过以下混合:

但是 Less 编译器每次都会显示以下错误消息:“在路径中找不到 .translate3d (translate3d (0, 50px, 0)) 的匹配定义......”

有谁知道可能导致这种情况的原因?

0 投票
1 回答
42 浏览

less - Mixin 以不同的方式处理 2 个相等的类定义

我从一个简单的例子开始:

结果是:

但:

结果是:

我不明白为什么编译器不包含.otherClassin .classB。我的意思是两个classA定义是相等的,不是吗?

对奇怪的行为有简单的解释吗?特别是,有没有办法.otherClass通过 mixins 包含或者我必须复制代码?

0 投票
1 回答
423 浏览

css - 在媒体查询中使用较少的 mixin

是否可以有不同的mixin取决于宽度?如何使它工作?

例如

谢谢你

0 投票
1 回答
144 浏览

css - 更少的混合,可变颜色特异性

我有一个设计,我需要能够根据 cms 中的输入更改页面上的颜色。

为此,我将一个类添加到一个包含的 div 中,并且我将根据该周围的类更改颜色。

会有一定数量的颜色。(8,我想。还没有决定。)

我的想法是使用 mixin 来实现这一点。例如。

示例 HTML

示例 LESS Mixin

示例 LESS

问题

问题是移动版本的特异性高于桌面版本。

示例呈现的 CSS

此问题将影响页面的其余部分。有没有更好的方法来完成我正在寻找的东西而不会到处粘贴重要的标签?

________________编辑________________

为清楚起见,我正在构建的网站将允许特定级别的登录用户更改其个人页面的主颜色,我仍然需要客户决定有多少颜色,但我认为它会在 8 左右。而不是写出每一个,或者为每一个都有一个单独的样式表(维护这将是可怕的)我决定为它创建一个 Mixin。将有多种背景颜色和文本颜色需要更改,并且由于设计原因,他们需要在移动桌面和平板电脑上更改为不同的颜色。

0 投票
2 回答
82 浏览

less - LESS 编译器之间的输出不一致

我已经编写了一些基于浏览器宽度调整文本大小的 LESS 代码。可以将多个不同的元素及其参数发送到可重用的 mixin。

所有在线 LESS 编译器都会输出所需的结果。但是我从 Squarespace 的 LESS 编译器中得到了不同的输出。

Squarespace 的编译器在第二次调用时似乎“挂在”旧变量值上。

你能看到 Squarespace 的 LESS 编译器是如何达到其输出的吗?如果是这样,你能否分享可以做出的更改以使输出与所有其他编译器保持一致?

在线编译器的输出:(需要)

Squarespace 编译器的输出:(不受欢迎)

LESS 源代码和Less2Css.org 上的代码链接

请注意,Squarespace 使用 LESS 1.3.3,因此您需要手动将 Less2Css 切换到该版本(尽管如果您不这样做,它似乎没有任何改变)。

0 投票
1 回答
504 浏览

css - Less 中基于变量的 Mixin 守卫

我正在尝试创建一个高度可定制的按钮混合。例如,我希望客户能够进入他们的 .less 文件并写入:

现在在我的.btn(...)mixin 中,我试图弄清楚如何正确地合并 Less mixin 守卫来做我想做的事情。

我猜我可以写这样的东西:

但这对我来说似乎非常低效和多余。有没有更好的方法来允许真正可定制的 mixin,但又不让客户端进行多次 mixin 调用?我真的希望能够通过调用来做到这一点.btn(...)

0 投票
0 回答
56 浏览

internet-explorer - IE9 html[lang] hack 和 LESS

我有一个带有规则集的 LESS mixin 来制作 IE9-hack 选择器:

破解来源:http ://browserhacks.com/#hack-e6b158b7e27bcb157326348efb5c0bb2

但编译后我看到:

如何在 LESS 中解决这个问题?

0 投票
1 回答
48 浏览

twitter-bootstrap-3 - 如何在 LESS 中使用 bootstrap mixin?

我正在准备页面布局,必须使用 Bootstrap 3。我有一个渐变按钮,所以我想使用 Bootstrap mixin #gradient.horizontal

但是在运行编译任务时出现解析错误:

我正在使用无引导 v:3.3.8 并在 main.less 文件中导入整个引导@import "bootstrap/index";

我将不胜感激任何提示如何解决它

0 投票
1 回答
592 浏览

css - 更少的 CSS:我可以在调用另一个 mixin 时调用一个 mixin 作为参数吗?

我试图在另一个 mixin 中调用一个 mixin 作为参数,但我得到一个语法错误。有问题的 mixin 调用中没有变量,只有参数。

我不确定这是否可能。我在这里看到的答案似乎是黑客或将变量和字符串作为参数处理。

更少的 CSS

错误(在前面的点处.contrastColorDark(10%)

我想要实现的目标:我试图让框边框颜色与其中使用对比度混合的某些元素相匹配。

0 投票
1 回答
7272 浏览

css - 在 @keyframes 属性中添加参数 Less

我有一个属性@keyframes,我用 autoprefixer 编译以添加所需的前缀。

我想做的是向动画名称(或任何可能的地方)添加一个参数,以将属性值更改为关键帧键。

这就是我现在所拥有的:

基本上我想做的是: