时间戳

首页 > 解决方案 > Sass，根据数据动态创建css类

sass - Sass，根据数据动态创建css类

问题描述

我有这堂课：

.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 个类，我只想根据我的数据创建类。

标签： sass

解决方案

当您想在元素上设置一个单独的类时，您似乎可以在构建页面时访问您的货币数据。在这种情况下，可能有一种没有 SASS 的更简单的替代方法。

(1)替代（非 SASS）解决方案——也许是一种更简单的方法

(a) 根据实际的用户设置/货币，将您的实际标志图像的 css 变量 'actual-currency-flag-url' 写入文件头部的样式块。

(b) 然后使用该变量在 css 中构建 url-path。

// 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) POSSIBLE SASS SOLUTION - 使用 mixin 在 SASS 中构建 270 个类

(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');
    }
}

推荐阅读