CODEWITHSUNDEEP
sasszurb-foundation
Connel
Connel

Reputation: 1881

Foundation SASS/SCSS Variables

I am trying to move over from Bootstrap to Zurb Foundation.

Bootstrap uses *-color for text colour and *-bg for background colours.

I'm a little confused with Foundation's naming scheme:

What is the difference between $topbar-link-bg-hoverand $topbar-link-bg-color-hover?

Both their names suggest that they change the background colour of a link in the top bar, both are given a colour.

Upvotes: 0

Views: 168

Answers (1)

Parhum
Parhum

Reputation: 770

Foundation structure has lots of details, if you search these variables in Foundation you can find them in _top-bar.scss file. Look at it, how used these variables:

// Apply the hover link color when it has that class
&:hover:not(.has-form) > a {
    background-color: $topbar-link-bg-color-hover;

    @if ($topbar-link-bg-hover) {
        background: $topbar-link-bg-hover;
    }
}

$topbar-link-bg-color-hover value can equal with color because use for background-color and $topbar-link-bg-hover value can equal with image or anything else(background css values).

Upvotes: 1

Related Questions