较少使用&
运算符来增强嵌套]的可能性。
.header { color: black;
.navigation { font-size: 12px;
&.class { text-decoration: none }
}
}
这会导致&
用父选择器替换,并导致实际选择器的权利与父选择器相结合:.header .navigation.class
而不是常规附加,这将导致.class
后代:.header .navigation .class
。
现在,还可以执行以下操作:
.header { color: black;
.navigation { font-size: 12px;
#some-id & .foo { text-decoration: none }
}
}
这将导致以下结果:#some-id .header .navigation .foo
在此处尝试。发生替换,并且我在父选择器之前 添加
了一个选择器(#some-id
)。
除了我永远不会以这种方式编写代码这一事实之外,因为这可能会立即使您的样式表混乱,我的问题是:
由于未记录此功能,因此它是功能还是更可能是错误?
有哪些可能的副作用?
自从我们在您提到的问题中遇到它以来,我还一直在思考这种用法。虽然我不能确切地回答这是“错误”的用法&
(BoltClock似乎提出了一个非错误的很好的论点),但我想为它的价值辩护(从逻辑上讲这
不是 错误)立场)。
但是,在逻辑参数之前,我确实找到了另一个简短的单引号(在“嵌套规则”部分),这似乎表明它至少并非并非意料之外:“
&
表示当前选择器的父级”。而已。正如BoltClock所论证的,在前面还是后面似乎都没有关系。这样做的唯一目的是成为到目前为止的“选择器父对象”的占位符。总是将其与该语言的“嵌套”用法结合使用的事实表明,该语言旨在指定嵌套的完整选择器字符串,直到嵌套所在的嵌套点为止。该字符串的使用方式(前置或附加)将由编码器决定。
现在,您提到(和前面提到的)您“永远不会以这种方式编码”,但是我发现自己看到了看起来非常有价值的用法。考虑以下参数。
为了说明起见,假设在body
元素上动态设置了三个可能的类(“浅”,“中”,“暗”主题),这些类会更改网站的“外观”。我们有两列,还有一些不同类型的链接,我们想要的风格(textLink
,picLink
,textWithIconLink
)在不同的为每个主题各列。
<body class="light">
<div class="leftCol">
<a class="textLink"></a>
<a class="picLink"></a>
<a class="textWithIconLink"></a>
</div>
<div class="rightCol">
<a class="textLink"></a>
<a class="picLink"></a>
<a class="textWithIconLink"></a>
</div>
</body>
现在要问的问题是,仅查看链接,以下两种方法,即…
“最佳”可能有些主观。我让您自己从下面权衡这些证据。
更少 (约99行代码)
/*Light Color Theme */
.light {
.leftCol {
.textLink {
color: fooL1;
&:hover { color: barL1;}
}
.picLink {
background-image: url(/fooL1.jpg);
&:hover { background-image: url(/barL1.jpg);}
}
.textWithIconLink {
color: fooL2;
background-image: url(/fooL2.jpg);
&:hover { color: barL2; background-image: url(/barL2.jpg);}
}
}
.rightCol {
.textLink {
color: fooL3;
&:hover { color: barL3;}
}
.picLink {
background-image: url(/fooL3.jpg);
&:hover { background-image: url(/barL3.jpg);}
}
.textWithIconLink {
color: fooL4;
background-image: url(/fooL4.jpg);
&:hover { color: barL4; background-image: url(/barL4.jpg);}
}
}
}
/*Medium Color Theme */
.medium {
.leftCol {
.textLink {
color: fooM1;
&:hover { color: barM1;}
}
.picLink {
background-image: url(/fooM1.jpg);
&:hover { background-image: url(/barM1.jpg);}
}
.textWithIconLink {
color: fooM2;
background-image: url(/fooM2.jpg);
&:hover { color: barM2; background-image: url(/barM2.jpg);}
}
}
.rightCol {
.textLink {
color: fooM3;
&:hover { color: barM3;}
}
.picLink {
background-image: url(/fooM3.jpg);
&:hover { background-image: url(/barM3.jpg);}
}
.textWithIconLink {
color: fooM4;
background-image: url(/fooM4.jpg);
&:hover { color: barM4; background-image: url(/barM4.jpg);}
}
}
}
/*Dark Color Theme */
.dark {
.leftCol {
.textLink {
color: fooD1;
&:hover { color: barD1;}
}
.picLink {
background-image: url(/fooD1.jpg);
&:hover { background-image: url(/barD1.jpg);}
}
.textWithIconLink {
color: fooD2;
background-image: url(/fooD2.jpg);
&:hover { color: barD2; background-image: url(/barD2.jpg);}
}
}
.rightCol {
.textLink {
color: fooD3;
&:hover { color: barD3;}
}
.picLink {
background-image: url(/fooD3.jpg);
&:hover { background-image: url(/barD3.jpg);}
}
.textWithIconLink {
color: fooD4;
background-image: url(/fooD4.jpg);
&:hover { color: barD4; background-image: url(/barD4.jpg);}
}
}
}
CSS输出 (大约87行输出,按主题排列)
/*Light Color Theme */
.light .leftCol .textLink { color:fooL1; }
.light .leftCol .textLink:hover { color:barL1; }
.light .leftCol .picLink { background-image:url(/fooL1.jpg); }
.light .leftCol .picLink:hover { background-image:url(/barL1.jpg); }
.light .leftCol .textWithIconLink {
color:fooL2;
background-image:url(/fooL2.jpg);
}
.light .leftCol .textWithIconLink:hover {
color:barL2;
background-image:url(/barL2.jpg);
}
.light .rightCol .textLink { color:fooL3; }
.light .rightCol .textLink:hover { color:barL3; }
.light .rightCol .picLink { background-image:url(/fooL3.jpg); }
.light .rightCol .picLink:hover { background-image:url(/barL3.jpg); }
.light .rightCol .textWithIconLink {
color:fooL4;
background-image:url(/fooL4.jpg);
}
.light .rightCol .textWithIconLink:hover {
color:barL4;
background-image:url(/barL4.jpg);
}
/*Medium Color Theme */
.medium .leftCol .textLink { color:fooM1; }
.medium .leftCol .textLink:hover { color:barM1; }
.medium .leftCol .picLink { background-image:url(/fooM1.jpg); }
.medium .leftCol .picLink:hover { background-image:url(/barM1.jpg); }
.medium .leftCol .textWithIconLink {
color:fooM2;
background-image:url(/fooM2.jpg);
}
.medium .leftCol .textWithIconLink:hover {
color:barM2;
background-image:url(/barM2.jpg);
}
.medium .rightCol .textLink { color:fooM3; }
.medium .rightCol .textLink:hover { color:barM3; }
.medium .rightCol .picLink { background-image:url(/fooM3.jpg); }
.medium .rightCol .picLink:hover { background-image:url(/barM3.jpg); }
.medium .rightCol .textWithIconLink {
color:fooM4;
background-image:url(/fooM4.jpg);
}
.medium .rightCol .textWithIconLink:hover {
color:barM4;
background-image:url(/barM4.jpg);
}
/*Dark Color Theme */
.dark .leftCol .textLink { color:fooD1; }
.dark .leftCol .textLink:hover { color:barD1; }
.dark .leftCol .picLink { background-image:url(/fooD1.jpg); }
.dark .leftCol .picLink:hover { background-image:url(/barD1.jpg); }
.dark .leftCol .textWithIconLink {
color:fooD2;
background-image:url(/fooD2.jpg);
}
.dark .leftCol .textWithIconLink:hover {
color:barD2;
background-image:url(/barD2.jpg);
}
.dark .rightCol .textLink { color:fooD3; }
.dark .rightCol .textLink:hover { color:barD3; }
.dark .rightCol .picLink { background-image:url(/fooD3.jpg); }
.dark .rightCol .picLink:hover { background-image:url(/barD3.jpg); }
.dark .rightCol .textWithIconLink {
color:fooD4;
background-image:url(/fooD4.jpg);
}
.dark .rightCol .textWithIconLink:hover {
color:barD4;
background-image:url(/barD4.jpg);
}
我将其命名为“最终目标分组”,因为这确实是我使用&
添加父选择器的另一种方式看到的方式。现在,一个编码是根据实际被设置样式的最终目标元素进行的。
更少 (约88行代码)
/*Links */
/*Text Links*/
.textLink {
.light .leftCol & {
color: fooL1;
&:hover { color: barL1;}
}
.light .rightCol & {
color: fooL3;
&:hover { color: barL3;}
}
.medium .leftCol & {
color: fooM1;
&:hover { color: barM1;}
}
.medium .rightCol & {
color: fooM3;
&:hover { color: barM3;}
}
.dark .leftCol & {
color: fooD1;
&:hover { color: barD1;}
}
.dark .rightCol & {
color: fooD3;
&:hover { color: barD3;}
}
}
/*Picture Links */
.picLink {
.light .leftCol & {
background-image: url(/fooL1.jpg);
&:hover { background-image: url(/barL1.jpg);}
}
.light .rightCol & {
background-image: url(/fooL3.jpg);
&:hover { background-image: url(/barL3.jpg);}
}
.medium .leftCol & {
background-image: url(/fooM1.jpg);
&:hover { background-image: url(/barM1.jpg);}
}
.medium .rightCol & {
background-image: url(/fooM3.jpg);
&:hover { background-image: url(/barM3.jpg);}
}
.dark .leftCol & {
background-image: url(/fooD1.jpg);
&:hover { background-image: url(/barD1.jpg);}
}
.dark .rightCol & {
background-image: url(/fooD3.jpg);
&:hover { background-image: url(/barD3.jpg);}
}
}
/*Text with Icon Links */
.textWithIconLink {
.light .leftCol & {
color: fooL2;
background-image: url(/fooL1.jpg);
&:hover { color: barL2; background-image: url(/barL1.jpg);}
}
.light .rightCol & {
color: fooL4;
background-image: url(/fooL3.jpg);
&:hover { color: barL4; background-image: url(/barL3.jpg);}
}
.medium .leftCol & {
color: fooM2;
background-image: url(/fooM1.jpg);
&:hover { color: barM2; background-image: url(/barM1.jpg);}
}
.medium .rightCol & {
color: fooM4;
background-image: url(/fooM3.jpg);
&:hover { color: barM4; background-image: url(/barM3.jpg);}
}
.dark .leftCol & {
color: fooD2;
background-image: url(/fooD1.jpg);
&:hover { color: barD2; background-image: url(/barD1.jpg);}
}
.dark .rightCol & {
color: fooD4;
background-image: url(/fooD3.jpg);
&:hover { color: barD4; background-image: url(/barD3.jpg);}
}
}
CSS (大约88行输出(由于多了一条注释),由最终目标元素组成;但是请注意,由于类结构的原因,仍然存在一个按主题划分的子组织)
/*Links*/
/*Text Links*/
.light .leftCol .textLink { color:fooL1; }
.light .leftCol .textLink:hover { color:barL1; }
.light .rightCol .textLink { color:fooL3; }
.light .rightCol .textLink:hover { color:barL3; }
.medium .leftCol .textLink { color:fooM1; }
.medium .leftCol .textLink:hover { color:barM1; }
.medium .rightCol .textLink { color:fooM3; }
.medium .rightCol .textLink:hover { color:barM3; }
.dark .leftCol .textLink { color:fooD1; }
.dark .leftCol .textLink:hover { color:barD1; }
.dark .rightCol .textLink { color:fooD3; }
.dark .rightCol .textLink:hover { color:barD3; }
/*Picture Links */
.light .leftCol .picLink { background-image:url(/fooL1.jpg); }
.light .leftCol .picLink:hover { background-image:url(/barL1.jpg); }
.light .rightCol .picLink { background-image:url(/fooL3.jpg); }
.light .rightCol .picLink:hover { background-image:url(/barL3.jpg); }
.medium .leftCol .picLink { background-image:url(/fooM1.jpg); }
.medium .leftCol .picLink:hover { background-image:url(/barM1.jpg); }
.medium .rightCol .picLink { background-image:url(/fooM3.jpg); }
.medium .rightCol .picLink:hover { background-image:url(/barM3.jpg); }
.dark .leftCol .picLink { background-image:url(/fooD1.jpg); }
.dark .leftCol .picLink:hover { background-image:url(/barD1.jpg); }
.dark .rightCol .picLink { background-image:url(/fooD3.jpg); }
.dark .rightCol .picLink:hover { background-image:url(/barD3.jpg); }
/*Text with Icon Links */
.light .leftCol .textWithIconLink {
color:fooL2;
background-image:url(/fooL1.jpg);
}
.light .leftCol .textWithIconLink:hover {
color:barL2;
background-image:url(/barL1.jpg);
}
.light .rightCol .textWithIconLink {
color:fooL4;
background-image:url(/fooL3.jpg);
}
.light .rightCol .textWithIconLink:hover {
color:barL4;
background-image:url(/barL3.jpg);
}
.medium .leftCol .textWithIconLink {
color:fooM2;
background-image:url(/fooM1.jpg);
}
.medium .leftCol .textWithIconLink:hover {
color:barM2;
background-image:url(/barM1.jpg);
}
.medium .rightCol .textWithIconLink {
color:fooM4;
background-image:url(/fooM3.jpg);
}
.medium .rightCol .textWithIconLink:hover {
color:barM4;
background-image:url(/barM3.jpg);
}
.dark .leftCol .textWithIconLink {
color:fooD2;
background-image:url(/fooD1.jpg);
}
.dark .leftCol .textWithIconLink:hover {
color:barD2;
background-image:url(/barD1.jpg);
}
.dark .rightCol .textWithIconLink {
color:fooD4;
background-image:url(/fooD3.jpg);
}
.dark .rightCol .textWithIconLink:hover {
color:barD4;
background-image:url(/barD3.jpg);
}
其他一些注意事项:
首先,大多数主题颜色(可能还有其他主题方面)都将设置有变量,即使使用上述选项2,也可以按主题将其分组到LESS代码的顶部,因此具有输出的主题结构CSS本身散布在代码中不一定是不好的。
其次,在任何主题代码之上都定义了一种元素类型的任何“标准”代码。我的示例并未显示这一点,但是说所有.textLink
元素都已text- decoration: none;
设置。这将在选项#2下发生一次,而没有任何其他选择器代码,并且将出现在下面所有主题更改的上方。对于选项1,我需要设置一个新的,未 嵌套的
.textLink
选择器(至少另一行代码),以将其应用于所有主题链接,并且该类的“基础”代码将再次位于与以下位置无关的位置主题链接信息的其余代码为。
第三,作为开发人员,如果我遇到问题picLinks
(页面上的特定类型的元素),则选择#2可以更轻松地检查我的代码中存在问题的元素,因为我的所有代码主题恰到好处。
显然,人们如何希望最终的LESS和CSS组织起来将成为人们如何看待这一价值的主要因素。
我在这里的观点只是说明存在一个非常有用的逻辑理由,&
以这种方式使用父级选择器添加到&
引用中。
问题内容: 我正在使用LESS改进我的CSS,并试图将一个类嵌套在一个类中。层次结构相当复杂,但是由于某种原因,我的嵌套无法正常工作。我有这个: 我无法上班。它只是显示位。如果我这样做就可以了: 我想窝在虽然。有任何想法吗? 问题答案: 该角色具有的功能关键字,居然(事我不知道在写答案的时刻)。可以这样写: 并且将生成的CSS如下所示: 作为记录,@ grobitto是第一个发布此信息的人。 [原
问题内容: 我一直在尝试使用嵌套形式,如下所示: 但似乎我缺少了一些东西。谁能协助我该怎么做? 问题答案: 将其括在括号中: 甚至更好的是,使用适当的/ 语句(出于可维护性): 但是,正如其他人指出的那样:使用起来更简单:
问题内容: 我可以做以下事情吗? 问题答案: 香草CSS不可能。但是,您可以使用类似: Sass使CSS再次变得有趣。Sass是CSS3的扩展,添加了嵌套规则,变量,mixins,选择器继承等。使用命令行工具或网络框架插件将其转换为格式良好的标准CSS。 要么 不用构造长的选择器名称来指定继承,在Less中,您可以简单地将选择器嵌套在其他选择器中。这样可以使继承更清晰,样式表更短。 例:
css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时,往往需要 一遍又一遍地写同一个ID: #content article h1 { color: #333 } #content article p { margin-bottom: 1.4em } #content aside { background-color: #EEE } 像这种情况,sass可以让你只写一遍,且
Grouping Selectors 在样式表中有很多具有相同样式的元素。h1 { color:green; } h2 { color:green; } p { color:green; } 为了尽量减少代码,你可以使用分组选择器。 每个选择器用逗号分隔. 在下面的例子中,我们对以上代码使用分组选择器:h1,h2,p { color:green; } 嵌套选择器 它可能适用于选择器内部的选择器的样
问题内容: 我不明白该输出(“ ”)是怎么来的? 我不明白为什么打印“ ”。 问题答案: 您需要将三元条件括起来: 返回: 如您所愿。 请参阅PHP三元运算符帮助的“三元运算符”底部的注释。 表达式从左到右进行求值。因此,您实际上得到了: 因此,您得到: 然后 然后 然后 等等。 请记住,PHP是动态类型的,并将任何非零,非空值都视为TRUE。