&。在SCSS中不起作用...为什么不行？
&。在SCSS中不起作用...为什么不行？
提问于 2018-06-03 02:19:36
我正在写一些基本的SCSS。但是我注意到，在一堂课之前，追加只在某些情况下有效。例如，在"section“或":hover，active”这样的元素之前。
但在".class“之前，这对我来说从来都不起作用。为什么不行？
例如，在下面的代码中，如果删除&，则.flex-item样式仅适用。但是看看docs/internet，它应该可以工作&在前面，不是吗？
section {
padding: 20px;
margin: 0 auto;
border: 1px solid red;
position: relative;
width: 95%;
list-style: none;
top: 100px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: center;
&.flex-item {
border: 1px solid green;
padding: 5px;
width: 50%;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: $white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
}下面是JSX：
我基本上想要一个部分，(因为它有高申请)。然后是两个flex项目，它们并排坐在一起，带有flex容器...
<section className="flex-container">
<div className="flex-item">
<h1>A cashback credit card for holiday and home</h1>
<ul className="pros">
<li>No fees for making purchases abroad</li>
<li>Nothing added on top of the Mastercard exchange rate</li>
<li>Manage your holiday spending with realtime in-app notifications</li>
<li>0.5% cashback on all purchases above £1</li>
<li>Friendly customer support from anywhere with with in-app chat</li>
</ul>
<p>Great the same great rewards on holiday and at home with the Travel Cashback Credit Card.</p>
<p>See full information</p>
<Link to="/page-2/">Go to page 2</Link>
</div>
<div className="flex-item">
<h1>Hi people</h1>
<p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p>
<Link to="/page-2/">Go to page 2</Link>
</div>
</section>
);
export default IndexPage;回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-03 04:49:42
只需在.flex-item之前删除&即可
section {
// your section rules
.flex-item {
// your .flex-item rules
}
}只有在需要使用伪选择器、向当前选择器(或部分类名)添加类、链接:hover或执行其他父选择器用法的情况下，才需要& (父元素引用)：
a {
// your link styles
&:hover {
// your hover styles
}
}
.button {
// .button styles
&.colored {
// .button.colored styles
}
&-large {
// .button-large styles
}
}或者对于其他一些父选择器设备：
section {
// some styles
.parentclass & {
// this will match .parentclass section
}
}这只是几个例子。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50659865
复制相关文章
相似问题