Переменные SCSS не отображаются во внешнем интерфейсе - PullRequest
Новая
       12

Переменные SCSS не отображаются во внешнем интерфейсе

0 голосов
/ 04 июля 2019

Я создаю свой первый веб-сайт и хотел, чтобы мои таблицы стилей были * .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>

Ответы [ 2 ]

4 голосов
/ 04 июля 2019 
<link type="text/css" rel="stylesheet" href="test.scss">

Вы пытаетесь использовать сырой SASS в качестве файла CSS в браузере. Вам необходимо использовать скомпилированный файл CSS, выведенный компилятором SASS.

1 голос
/ 04 июля 2019

Подход здесь заключается в использовании 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 и компилятор scss

...