Блог

Главная - Вопросы по программированию - SCSS — Условное включение не работает, и все блоки выполняются

SCSS — Условное включение не работает, и все блоки выполняются

#html #css #sass

Вопрос:

Я пытаюсь выполнить условное включение в scss. Вот код:

HTML

 <div class="test" data-active data-label data-comment >1</div>
<div class="test" data-active data-label>2</div>
<div class="test" data-active data-comment >3</div>
<div class="test" data-active data-comment data-label>4</div>
<div class="test" data-active>5</div>

SCSS

 .test[data-active]{

  background : red;
  width: 50px;
  height: 50px;
  display: inline-block;
  
  $margin: 0px;
  amp;[data-label]{
    background : blue;
    $margin: $margin   10px;
  }
  amp;[data-comment]{
    background: yellow;
    $margin: $margin   10px;
  }
  amp;[something]{
    $margin: $margin   100px;
  }
  margin-right : $margin;
}

Вот ссылка на кодовую ссылку: https://codepen.io/gaurav-neema/pen/VwpPBxY

В коде вы можете видеть, что даже если элемент не содержит атрибута, все блоки выполняются и поле включено.

Может ли кто-нибудь помочь определить, что не так с кодом?

Ответ №1:

Вы $margin каждый раз переопределяете, вы не можете использовать селекторы, такие как if операторы.

Переопределение с помощью:

  • $margin: $margin 10px;
  • $margin: $margin 100px;

Вы устанавливаете все margin-right: 100px;

Я думаю, вы могли бы захотеть:

SCSS

 $margin: 0px;

.test[data-active] {
  background: red;
  width: 50px;
  height: 50px;
  display: inline-block;
  
  amp;[data-label] {
    background : blue;
    margin: $margin   10px;
  }

  amp;[data-comment] {
    background: yellow;
    margin: $margin   10px;
  }

  amp;[something] {
    margin: $margin   100px;
  }

  margin-right: $margin;
}

Комментарии:

1. Я думал, что блок будет выполнен только в том случае, если атрибут существует в элементе. Есть ли какое-либо обходное решение для этого?

2. Все это «выполняется», поскольку все это отображается в вашем CSS, но это будет применяться только в том случае, если отображаемый селектор применяется к вашей разметке.

3. Определите, что вам конкретно нужно для переменной $margin , особенно с тех пор 0 , как вы ее добавляете, поэтому вы можете просто пропустить добавление и просто установить ее напрямую. Если вы намерены изменить базовое $margin значение, вы все равно можете добавить его вместе и применить внутри каждого селектора.

4. Я просто добавил маржу для демонстрации. Что мне действительно нужно, так это включать значки выборочно на основе атрибутов.

5. Также рекомендуется сохранять все свойства, применимые к селектору, вместе, поэтому ваше поле справа внизу должно быть сразу после display: inline-block; . И, возможно, ваше намерение состоит в том, чтобы нижние селекторы были margin-right: $margin 10px; и т. Д.

Ответ №2:

То, что вы ищете, — это пользовательские свойства CSS. SCSS не является динамическим и предназначен для визуализации при компиляции. Пользовательские свойства CSS являются динамическими, поэтому они применяются после выполнения условия, то есть, когда ваш класс будет применен, он изменит значение.

Читайте о разнице на:

Читайте о пользовательских свойствах CSS по адресу:

Это всего лишь 3 из стольких статей на эту тему.

Теперь демонстрационное время, я изменил свойство background-color , чтобы сделать его более понятным для демонстрации.

 .test[data-active] {
  --background-color: aqua;

  background: var(--background-color);
  width: 50px;
  height: 50px;
  display: inline-block;
}

.test[data-label] {
  --background-color: deeppink;
}

.test[data-something] {
  --background-color: deepskyblue;
} 
 <div class="test" data-active data-label data-comment>1</div>
<div class="test" data-active data-label>2</div>
<div class="test" data-active data-comment>3</div>
<div class="test" data-active data-comment data-label>4</div>
<div class="test" data-active data-something>5</div>
Метки: ,