Dynamically set Sass variables in Foundation

问题:

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.

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.

回答1:

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.
}

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.