个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我的 .less 样式表中有以下代码。
@text-inputs: input[type=text], input[type=password], input[type=email], input[type=number];
@shade: rgba(0, 0, 0, 0.1);
.highlight {
background: @shade;
}
.input-highlight {
@{text-inputs} {
.highlight;
}
}
.input-highlight-subtle {
@{text-inputs} {
&:focus {
.highlight;
}
}
}
我的 HTML:
<body class="input-highlight-subtle">
<input type="text" placeholder="Type Here" />
<input type="password" placeholder="Type Here"/>
</body>
上述 CSS 的结果:即使我没有悬停在输入上，输入的背景也是 @shade 颜色。我检查了我的浏览器开发者工具，显然它生成了这样的代码:
.highlight {
background: rgba(0, 0, 0, 0.1);
}
.input-highlight-subtle input[type=text], input[type=password], input[type=email], input[type=number]:focus {
background: rgba(0, 0, 0, 0.1);
}
那么我该如何解决呢？
编辑:
基本上我想要这样的输出:
.input-highlight-subtle input[type="text"]:focus, .input-highlight-subtle input[type="password"]:focus, .input-highlight-subtle input[type="email"]:focus, .input-highlight-subtle input[type="number"]:focus {
.highlight;
}
我怎样才能用更少的代码实现 ^？ (双关语)
最佳答案
你可以试试:
.text-inputs() {
input[type=text], input[type=password],input[type=email], input[type=number]{
.text-inputs-properties();
}
}
@shade: rgba(0, 0, 0, 0.1);
.highlight {
background: @shade;
}
.input-highlight {
.text-inputs();
.text-inputs-properties() {
.highlight;
}
}
.input-highlight-subtle {
.text-inputs();
.text-inputs-properties() {
&:hover{
.highlight;
}
}
}
感谢@seven-phases-max 的回答Focused selector in variable . How to do that stuff in LESS like in SCSS
我刚刚根据您的情况对其进行了调整，您可以在此处处理此 FIDDLE例如，我希望这有帮助
编辑 1: 我找到了 this @scottgit comment我认为它也应该被考虑
“有一种方法可以使用 LESS 1.7 的功能将属性分配给变量中定义的一组选择器。考虑一下:”
//I modified the code a litter bit for your case
@shade: rgba(0, 0, 0, 0.1);
@inputs: {input[type=text], input[type=email], input[type=password], input[type=number] {.getProps()}};
@pseudo: ~':hover';
@props: { background: @shade;};
.input-highlight-subtle{
.setProps(@selectors; @props; @extension: ~'') {
@selectors();
.getProps() {
&@{extension} { @props(); }
}
}
.setProps(@inputs; @props; @pseudo);
}
“所以我可以根据需要分配一个伪类，并根据需要传递一组属性。关键是将 mixin .getProps() 调用放入 block 中为变量 @inputs 定义选择器，然后在 .setProps() 中将其作为本地混合调用，以便将属性放在我们想要的位置。 @extension 可以是任何转义字符串，作为选择器字符串的附加部分添加到每个选择器。上面我将 :focus 作为伪类，但我可以做 ~' > div + div' 作为子项和兄弟项的组合，或其他任何形式。"
关于html - 更少的 CSS - & :focus not working in variable selector，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30696131/
25
4
0
for /f "tokens=*" %%a in ('find /v ":" "%appdata%\gamelauncher\options.txt" ^| find "menu=a"') do (
我在 Javascript 中有一组全局计数器变量: var counter_0 = 0; var counter_1 = 0; var counter_2 = 0; 等等 然后我有一个 Javasc
好的，我正在阅读一些有关 RedBlackTrees 的代码。我注意到这一行“v1 = v2 = v3 = v4;”我理解类似“v1 += v2”(将 v2 添加到 v1 的当前值)和“v1 = v2
我正在为 C# 中的游戏数据加载制作一个 csv 阅读器，我想做的就是从数组(变量)的值声明一个变量，我们可以在 php 中像 $$foo 那样做。喜欢 void csvReader(string s
假设我有变量 内容为“ 123 ”和变量 b123 里面有一些文字。出于某种原因，我想使用变量 作为第二个 var 名称的一部分。像这样的东西: SET a=123 SET b123=some_tex
我对 javascript 有点陌生，我无法通过谷歌搜索找到任何内容，我正在编写一个程序，并且能够执行我所要求的操作: if (Variable == 1 或 Variable == 2 或 Vari
我发现我自己在做这种类型的 IF 语句分配。例如: if($variable == 1 || $variable == "whatever" || $variable == '492') { ...
我的虚拟 PC 在 MS-DOS 6.22 上运行时出现问题。 我需要使用变量 Date ，但我无法得到它，因为每当我尝试回显变量时，它都会显示 %variable%反而。 我在 Windows 控制
尝试运行此代码时: List list = em.createQuery("select balance b from Users where b.userName = '" + user_name.
我有一些代码，其中变量可以是 undefined、null 或正常值。无论变量是 undefined 还是 null，代码都需要做同样的事情。说有没有危险 for (var cur = this.bu
我正在编写一个批处理命令脚本，其中检查环境变量。我需要通过传递所有必需的变量来编写一个 FOR 循环，然后验证它是否已定义，如果未定义，则提示该键的值并永久设置该变量。 问题是我无法取消引用循环变量并
我知道这些是 Rails 的基础知识，但我仍然不知道 = 符号和 => 之间的全部区别以及 @some_variable 之间的区别、@@some_variable 和 :some_variable
我正在使用以下内容创建一个动态变量(PHP 术语中的“变量变量”): foo: "test1" set to-word (rejoin [foo "_result_data"]) array 5 但是
我一直在啃 PHP 套接字服务器和客户端的基础知识 here . 然后我偶然发现了这些行(摘自上面链接的第一个示例，发生在 while 中): if (false === ($buf = socket
这个问题在这里已经有了答案: What does "|=" mean? (pipe equal operator) (6 个答案) 关闭 9 年前。 我正在寻找一些编码来扩展我在 Java 方面的知
如何在 C++ 中从其他变量的值打印变量我只是 C++ 的新手。 在 php 中，我们可以通过其他变量的值来制作/打印一个变量。像这样。 $example = 'foo'; $foo = 'abc';
作为 Ruby on Rails 新手，我明白“@”和“:”引用有不同的含义。我看到了this post在 SO 中，其中描述了一些差异。 @ 表示实例变量(例如@my_selection) :表示别
编程新手/甚至更新。一个小的 go 程序有问题 - 不会编译带有 undefined variable 错误。代码: package main import ( "fmt" "io" "o
我知道其他一些语言，如PHP，支持“变量变量名”的概念--即，字符串的内容可以用作变量名的一部分。。我听说总的来说这不是一个好主意，但我认为它可以解决我在Python代码中遇到的一些问题。。有没有可能
我有两个版本的代码。 版本 1 Launcher.java class Launcher { public static void main(String[] args) {
我是一名优秀的程序员,十分优秀！