установить значение переменной CSS в HTML

Question

Я мигрирую приложение с Ionic 1 на Ionic 4, и у меня проблема с css (я не очень разбираюсь в css и стилях), создаю переменную в variables.scss

--my-color-secondary: #5BC500;

И мне нужна ионная кнопка, чтобы принять это значение, но у меня ничего не получится, однако, если я создаю кнопку следующим образом:

<ion-button color="primary">Go</ion-button>

Примите значение по умолчанию, определенное в --ion-color-primary: #3880ff;

Answer 1

Первый color не является допустимым атрибутом HTML. Ионная "может" преобразовать это для вас, но я сомневаюсь в этом. Вы должны либо применить class="myClass" или встроенный style=""

---

Переменные CSS ДОЛЖНЫ БЫТЬ применены внутри объявления стиля. Как правило, это означает Внутри блока стиля (или импортированной таблицы стилей) примерно так:

--main-bg-color: #cc0000;

.className {
  background-color: var(--main-bg-color);
}

Вы также можете УСТАНОВИТЬ значение переменной inline следующим образом:

button {
  color: var(--myTextColor);
  font-weight: bold;
  background-color: #dadada;
}

<button style="--myTextColor: #cc0000;">Button</button>

Это требует отдельной стилизации для элемента, в котором установлена ​​переменная.

Примечание: Переменная НЕ будет работать вне области действия элемента со встроенными стилями.