Question

我正在建立我的第一个网站，并希望样式表为* .scss。

我正在将PhpStorm与File Watcher一起使用来自动编译（Node.js），并且一切正常，但是如果我使用简单的颜色变量作为示例，例如背景色，不会引发任何错误，但它不会显示在我的页面上。

这是测试的尝试：

$color-red: #FF0000;
$color-green: #00FF00;
$color-blue: #0000FF;
h1 {
  color: $color-red;
}

p {
  color: $color-green;
}

a {
  color: $color-blue;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link type="text/css" rel="stylesheet" href="test.scss">
</head>

<body>
  <h1>A Red Title</h1>
  <p>A green paragraph</p>
  <a href="">A Blue Link</a>
</body>

</html>

Answer 1

<link type="text/css" rel="stylesheet" href="test.scss">

您正在尝试将原始SASS用作浏览器中的CSS文件。您需要使用SASS编译器输出的已编译CSS文件。

Answer 2

这里的方法是使用var，它在CSS中可用。请在下面找到如何使用var的示例。

:root {
  --color-red: #FF0000;
  --color-green: #00FF00;
  --color-blue: #0000FF;
}

h1 {
  color: var(--color-red);
}

p {
  color: var(--color-green);
}

a {
  color: var(--color-blue);
}

<h1>A Red Title</h1>
<p>A green paragraph</p>
<a href="">A Blue Link</a>

注意：您不能在浏览器中使用scss。如果您有scss代码，您需要在执行之前将它们编译为等效的css代码它们在您的浏览器中。

请参考有关css variables和scss compiler的更多信息

SCSS变量未显示在前端

2 个答案: