时间戳

首页 > 解决方案 > SCSS 字体大小不适用

sass - SCSS 字体大小不适用

问题描述

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

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

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

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

检查元素显示了这一点：

但是当我检查代码时，它显示如下： 在此处输入图像描述

标签： sassfontsfont-size

解决方案

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

在 Chrome 开发工具中，您可以按住 ctrl 单击属性值 - 在这种情况下500 15px/120px $rob，如屏幕截图所示。

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

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

推荐阅读