&amp ;.在SCSS中不起作用...为什么不呢? [英] &. doesn't work in SCSS... why not?

问题描述

我正在写一些基本的SCSS.但是我注意到附加了&在上课之前，仅在某些情况下有效.例如，在"section"之类的元素之前或在:hover，active"之前.

I'm writing some basic SCSS. But I've noticed appending & before a class, only works in certain circumstances. For example, before elements like "section" or before ":hover, active".

但是，这对我来说在".class"之前是行不通的.为什么不呢?

But this never works for me before ".class". Why not?

例如，在下面的代码中， .flex-item 样式仅在我删除&的情况下适用.但是看看docs/internet，它应该与&一起使用.在前面，不是吗?

For example, in the below code, .flex-item styles only apply, if I remove the &. But look at docs/internet, it should work with & in front, no?

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容器并排放置...

I basically want a section, (as that has high applied). And then two flex items, which sit side by side in a row, with the flex container...

   <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;

推荐答案

只需在.flex-item之前删除&:

section {
    // your section rules
    .flex-item {
        // your .flex-item rules
    }
}

仅在要使用伪选择器，将类添加到当前选择器(或部分类名称)，链接:hover或执行其他父选择器的情况下，才需要&(父元素引用)用法:

You only need the & (parent element reference) in cases where you want to use a pseudo selector, adding classes to the current selector (or partial class names), link a :hover or doing some other parent selector usage:

a {
    // your link styles
    &:hover {
        // your hover styles
    }
}

.button {
    // .button styles
    &.colored {
        // .button.colored styles
    }
    &-large {
        // .button-large styles
    }
}

或者对于其他一些父选择器设备:

Or for some other parent selector appliances:

section {
    // some styles
    .parentclass & {
         // this will match .parentclass section
    }
}

这只是几个例子.

这篇关于&amp ;.在SCSS中不起作用...为什么不呢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！