&.не работает в SCSS ... почему бы и нет? - PullRequest
Новая
       56

&.не работает в SCSS ... почему бы и нет?

0 голосов
/ 02 июня 2018

Я пишу некоторые базовые SCSS.Но я заметил, что добавление и перед уроком работает только при определенных обстоятельствах.Например, перед элементами вроде «section» или before «: hover, active».

Но это никогда не работало для меня до ".class".Почему бы нет?

Например, в приведенном ниже коде стили .flex-item применяются только в том случае, если я удалю &.Но посмотрите на документы / интернет, он должен работать с & впереди, не так ли? 

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:

Я в основном хочу раздел, (поскольку это имеет высокий примененный),А затем два гибких предмета, которые расположены рядом друг с другом, вместе с гибким контейнером ... 

   <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 Ответ

0 голосов
/ 02 июня 2018

Просто удалите & перед .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
    }
}

ЭтоВот лишь несколько примеров.

...