基础 SASS/SCSS 变量

Question

我正在尝试从 Bootstrap 转到 Zurb Foundation。

Bootstrap 使用 *-color 作为文本颜色，使用 *-bg 作为背景颜色。

我对 Foundation 的命名方案有点困惑：

$topbar-link-bg-hover和$topbar-link-bg-color-hover有什么区别？

他们的名字都暗示他们改变了顶部栏中 link 的背景颜色，他们都被赋予了颜色。

Answer 1

Foundation 结构有很多细节，如果你在 Foundation 中搜索这些变量，你可以在 _top-bar.scss 文件中找到它们。看看，这些变量怎么用的：

// 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 值可以等于颜色，因为用于 background-color 和 $topbar-link-bg-hover 值可以等于图像或其他任何值（背景 css 值）。

基础 SASS/SCSS 变量

Foundation SASS/SCSS Variables

sass

zurb-foundation