基础 SASS/SCSS 变量

【问题标题】：Foundation SASS/SCSS Variables基础 SASS/SCSS 变量
【发布时间】：2015-04-07 02:24:05
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： sass zurb-foundation

【解决方案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 值）。

【讨论】：