主页 / 问题 / 1146019
Accepted
Никита
Asked:2020-06-26 22:52:15 +0800 CST2020-06-26 22:52:15 +0800 CST

Sass 变量不起作用

  • 772

我会解决这个问题：

有一个带有数字和按钮的标题：

<body>
  <header class="header">
    <div class="header-contacts">
      <div class="header-contacts__phone">8 (123) 000-00-00</div>
      <div class="header-contacts__phone">8 (123) 000-00-00</div>
      <button class="header-contacts__button">Заказать звонок</button>
    </div>
  </header>
</body>

样式“style.sass”：

@import: 'header'
@import: 'variable'

标题样式文件“_header.sass”：

.header
  padding-top: 50px
  &-contacts
    display: flex
    justify-content: flex-end
    &__phone
      font-size: 22px
      &__button
        font-size: 14px
        color: $text-color-dark

还有一个带有变量的单独文件，它连接到 style.sass 文件：

“_variable.sass”：

@text-color-dark: #353535

并且 gulp 应该毫无问题地将所有这些收集到一个 css 文件中（至少它曾经收集它）。现在他开始抱怨：

Error in plugin "sass"
Message:
    src\sass\_header.sass
Error: Undefined variable: "$text-color-dark".
        on line 11 of src/sass/_header.sass
        from line 6 of src/sass/style.sass
>>                      color: $text-color-dark; } } }

对不起，如果这是一个很长的问题，但我不知道如何解释它。

sass

2 个回答

  1. Best Answer

    变量必须直接在 sass 文件中声明，或者在文件中包含的文件中声明。显然，gulp，或者更确切地说是 sass 编译器，发誓你在使用这些变量的文件中有这些变量，实际上它们丢失了。我还想指出，根据标准，制表符用于制表，或 4 个空格，但不是 1。语法突出显示不会发出任何信号，特别是因为您有一个编辑器，而不是 IDE，正如您自己所说的那样。

    • 0

  2. 也许在 @text-color-dark: #353535 而不是 @ 你需要 $

    • 0

相关问题