Можете ли вы помочь мне интерпретировать `&` в коде Sass?

Question

Это DOM, применяющий Sass.

<i className={`contract-icon ic-${this.props.value}`} /> 

Это файл Sass.

.contract-icon {
    &.ic-rise_fall {
        &:before {
            content: url('../images/trading_app/contracts/rise_fall.svg');
        }
        &--invert:before { # What's this?
            content: url('../images/trading_app/contracts/invert/rise_fall.svg');
        }
    }
    .other-class {
        padding-right: 8px;
    }
    ...

Основываясь на моих исследованиях,

• & - это объединение / соединение с этим селектором, если к текущему элементу применен сопутствующий класс.

  • (Угадай) Так что я подумал, что мы можем построить DOM следующим образом: <div class="contract-icon> <div class="ic-rise_fall"> -> Но этоне является правильным.Почему это не так?Чем он отличается от .contract-icon класса?

• (Бонусный вопрос) Что такое --invert:before?

Answer 1

& ссылается на родительский селектор .

Понять, что он делает, очень легко.Вы можете сказать, что это похоже на добавление родительский селектор.Или подумайте об этом следующим образом.

Итак, допустим, вы хотите применить несколько стилей к .container, который является стандартным CSS:

1. .container.success,
2. .container.success.but-stupid,
3. .container.successful,
4. .container > div.error,
5. .container ~ div.stupid,
6. .container-----_happy-sass

И в SASS вы можете сделать это следующим образом:

.container { /* this is 1 */
    &.success { 
        &.but-stupid { /* this is 2 */ }
        &ful { /* this is 3 */  }
    }

    & > div.error { /* this is 4 */ }

    & ~ div.stupid { /* this is 5 */ }

    &-----_happy-sass { /* this is 6 */ }
}

Или, в вашем случае выше,

.contract-icon {
    &.ic-rise_fall {  /* EQUALS TO .contract-icon.ic-rise_fall */
        &:before { /* EQUALS TO .contract-icon.ic-rise_fall:before; */
            /*declarations*/
        }
        &--invert:before { /* EQUALS TO .contract-icon.ic-rise_fall--invert */
            /*declarations*/
        }
    }

    .other-class { /* EQUALS TO .contract-icon .other-class */
        /*declarations*/
    }
}

Answer 2

Вы можете сказать, что " & " является верхним родителем.например,

Это SASS с & .

.contract-icon {
    &.ic-rise_fall {
        &:before {
            content: url('../images/trading_app/contracts/rise_fall.svg');
        }
        &--invert:before { # What's this?
            content: ''
    }
  }
}

, это скомпилированный CSS из & .Он выберет селектор того же уровня

.contract-icon.ic-rise_fall:before {
  content: url("../images/trading_app/contracts/rise_fall.svg");
}
.contract-icon.ic-rise_fall--invert:before {
  content: "";
}

Это SASS без & .

   .contract-icon {
      .ic-rise_fall {
            &:before {
                content: url('../images/trading_app/contracts/rise_fall.svg');
            }
      }
    }

Скомпилированный CSS без & .Он выберет дочерний элемент

 .contract-icon .ic-rise_fall:before {
  content: url("../images/trading_app/contracts/rise_fall.svg");
}

Помогает напрямую прикрепить родительский селектор

Answer 3

С этой строкой вы фактически применяете два класса к i, которые contract-icon и ic-{something} (в примере это ic-rise_fall).

Как вы сказали & используется для объединения имен классов.Средства: -

&.ic-rise_fall {
    &--invert:before { # What's this?
        content: url('../images/trading_app/contracts/invert/rise_fall.svg');
    }
}

Это будет преобразовано в

&.ic-rise_fall--invert:before {
    content: url('../images/trading_app/contracts/invert/rise_fall.svg');
}

в CSS.

Таким образом, в основном код

.contract-icon {
    &.ic-rise_fall {
        &:before {
            content: url('../images/trading_app/contracts/rise_fall.svg');
        }
        &--invert:before { # What's this?
            content: url('../images/trading_app/contracts/invert/rise_fall.svg');
        }
    }
    .other-class {
        padding-right: 8px;
    }
}

будетбыть преобразован в

.contract-icon.ic-rise_fall:before {
    content: url('../images/trading_app/contracts/rise_fall.svg');
}
.contract-icon.ic-rise_fall--invert:before {
    content: url('../images/trading_app/contracts/invert/rise_fall.svg');
}
.contract-icon .other-class {
    padding-right: 8px;
}

Вот так.

Этот ic-{something} передается от родителя как props, поэтому может быть либо ic-rise_fall, либо ic-rise_fall--invert.Поэтому мы просто рассматриваем возможности использования SASS здесь.

<span class='contract-icon ic-rise_fall'>
   <i class='other-class'></i>
</span>

Рассмотрим это как случай, когда вы применили other-class и ic-rise_fall