Блог

Главная - Вопросы по программированию - Sass, создайте динамический класс css в зависимости от данных

Sass, создайте динамический класс css в зависимости от данных

#sass

#нахальство

Вопрос:

У меня есть этот класс:

 .currency-flag-clp:before {
    background-image: url('~currency-flags/dist/square-flags/clp.svg');
}

Я хочу динамически добавлять этот класс в html-элемент, поэтому мне нужно добавить такой класс, как:

 .currency-flag-XXXXX:before {
    background-image: url('~currency-flags/dist/square-flags/XXXXX.svg');
}

Есть ли способ с помощью sass сделать это? Я не хочу определять 270 классов для каждого значения, я просто хочу создать класс в зависимости от моих данных.

Ответ №1:

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

(1) АЛЬТЕРНАТИВНОЕ (НЕ SASS) РЕШЕНИЕ — возможно, более простой подход

(a) Запишите переменную css ‘actual-currency-flag-url’ для вашего фактического изображения флага в блок стиля в заголовке вашего файла на основе фактических пользовательских настроек / валюты.

(b) Затем используйте эту переменную для построения URL-пути в css.

 // add to <head> of page:
// based on your data maybe you can do it by php
// note: don't use slashes when building url(...)

<style>
   :root { 
      --actual-currency-url: url(url-path/flag-[actualCurrency].jpg);
   }
</style>


// change class off html element
// from <div class="currency-flag-XXXXX"> to:

<div class="currency-flag">

// now you can do in your separate stylesheet file:
.currency-flag:before {
  background-image: var(--actual-currency-url);
}

Написание стиля непосредственно к элементу менее элегантно, но, конечно, работает также.

(2) ВОЗМОЖНОЕ РЕШЕНИЕ SASS — создание 270 классов в SASS с использованием mixin

(a) На основе ваших данных: создайте простой список суффиксов и используйте его для построения карты SASS с суффиксами ваших флагов.

(b) Используйте @each для создания всех 270 классов одновременно

 // example code in SASS:

$flag-suffixes: (
    USD,
    AUD,
    EUR,
    //...
);

@each $suffix in $flag-suffixes {

    .currency-flag-#{$suffix}:before {
        background-image: url('~currency-flags/dist/square-flags/#{$suffix}.svg');
    }
}