在 Foundation 中动态设置 Sass 变量

问题描述

如何在 Foundation 中动态设置 Sass 变量?根据他们的文档，你可以借助一些 Sass 自定义表格_settings.scss 中的变量，我们以背景色为例.现在如果我想使用两种不同类型的表格，背景颜色不同怎么办?我是 Foundation 和 Sass 的新手，这些变量在我看来很像全局变量.

How do you dynamically set Sass variables in Foundation? According to their docs, you can customize a table with the help of a few Sass variables in _settings.scss, let's take the background color for example. Now what if I want to use two different kinds of tables, with different background colors? I am new to both Foundation and Sass, and these variables seem a lot like globals to me.

我想我可以创建自己的变量，例如 $dark-table-bg，但是如何在我的 html 中创建一个使用该变量的表格?

I guess I could make my own variables, such as $dark-table-bg, but how would I make a table use that variable in my html?

澄清一下:我要实现的唯一事情是将两张桌子并排放置，颜色不同.

To clarify: the only thing I'm trying to achieve is having two tables next to each other, with different colors.

推荐答案

Foundation 不为多种颜色的表格提供任何特殊结构.如果您想为表格设置 2 种不同的样式，您可以按照使用 vanilla CSS 的方式进行操作.

Foundation does not offer any special constructs for tables that come in multiple colors. If you want to have 2 different styles for tables, you do it the same way you would with vanilla CSS.

table.with-alternate-colors {
    th {
        background: blue
    }

    // etc.
}

如果您想查看 Foundation 应用于表的所有样式，以便了解需要覆盖的内容，可以通过 浏览他们的仓库

If you want to see all of the styles that Foundation applies to tables so that you know what you need to override, you can find that information by browsing their repo

注意:虽然您可以使用该表格混合，但我不建议您使用，除非您正在更改关于表格样式的一切.

Note: While you could use that table mixin, I don't recommend unless you were changing everything about the way the table is styled.

这篇关于在 Foundation 中动态设置 Sass 变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！