SCSS 字体大小不适用答案

【问题标题】：SCSS font size not applyingSCSS 字体大小不适用
【发布时间】：2019-10-04 08:52:14
【问题描述】：

这是我第一次使用使用 SCSS 的网站模板，因此我不知道该怎么做。

我有以下代码来设置导航栏链接的文本样式：

.nav-link{
    font: 500 15px/120px $rob;
    text-transform: uppercase;
    color: #fff;
    padding: 0px;
    display: inline-block;
    &:after{
        display: none;
    }
}

我已将最小/最大字体大小设置为 15 像素/120 像素。但是在我的网站上，它一直显示为 12px。我做错了什么？

Inspect 元素显示了这一点：

但是当我检查代码时，它显示如下：

【问题讨论】：

标签： sass fonts font-size

【解决方案1】：

如果运气好的话，您可以使用 Sass 源映射找到通往真相的道路。您的模板似乎具有此内置功能，因为您可以在检查器代码中看到文件名 _header.scss:17。（如果未启用源映射，它只会说出编译后的 .css 文件的名称。）

在 Chrome 开发工具中，您可以按住 ctrl 键单击属性值 - 在本例中为 500 15px/120px $rob，如屏幕截图所示。

这将带您进入开发工具中的“源”面板并显示编译此特定值的.scss 文件，您可以查看您是否一直在编辑正确的文件。

由于将 Sass 文件拆分为更小的文件（或部分）是一种常见做法，因此您的编辑很有可能会被模板中的其他部分覆盖。

【讨论】：

附言。 15px/120px 值不是最小/最大字体大小，它是字体大小/行高的简写。