我正在尝试在React的上下文中少写一些。
下面的代码可以工作:
.rt-tr-group .rt-tr:hover .rt-td {
color: #fff;
&:first-child { /* notice single ampersand */
border-left: 2px solid #007aff;
}
}这段代码也可以工作:
.rt-tr-group .rt-tr:hover .rt-td {
color: #fff;
}
.rt-tr-group .rt-tr:hover .rt-td:first-child {
border-left: 2px solid #007aff;
}但是,以下代码不起作用:
.rt-tr-group .rt-tr:hover .rt-td {
color: #fff;
&&:first-child { /* notice double ampersand */
border-left: 2px solid #007aff;
}
}我已经在代码库的其他地方看到使用了双和号,所以&&做了一些事情。有人能给我解释一下其中的区别吗?
发布于 2019-03-05 01:38:48
您看到的两个“与”符号可能是& + &或& ~ &,而不是&&,就我所知,后者在Sass中什么也不做。
使用& + &将允许您针对同一选择器的相邻同级,例如以下SCSS:
.btn {
...
& + & {
margin-left: 15px;
background: firebrick;
}
}...will编译成这个CSS:
.btn {
...
}
.btn + .btn {
margin-left: 15px;
background: firebrick;
}阅读更多关于双与号here at Team Treehouse的信息。
发布于 2019-03-05 01:46:27
在几乎所有流行的编程语言中,&&对于基本逻辑运算符AND来说都是多余的,而单一的&专门用于在SASS中连接CSS选择器。
连接,或者更准确地说,在SASS的用例中:连接选择器在逻辑意义上与组合两个条件非常不同。
进一步阅读:https://www.sitepoint.com/sass-basics-operators/和https://javascript.info/logical-operators
发布于 2019-03-05 01:48:03
这可能是为了增加特异性:.thing.thing比.thing更高
https://stackoverflow.com/questions/54988593
复制相似问题