基础SASS / SCSS变量

Question

我正试图从Bootstrap转移到Zurb Foundation。

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

我对基金会的命名方案感到困惑：

$topbar-link-bg-hover和$topbar-link-bg-color-hover之间的区别是什么？

他们的名字都表明他们改变了顶部栏中链接的背景颜色，两者都有颜色。

Answer 1

基础结构有很多细节，如果你在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值）。