1 Correct answer
Even the W3C's CSS Validator doesn't handle css variables correctly yet.
In reality, DW's Linting (what's causing the red line numbers) is probably a more accurate tool when it's turned off. It seems to enjoy giving errors for things that aren't actual html errors.
What you have will work fine and is technically correct. However, when css is in an external file, you might need to hit F5 in your html file to get Live View to refresh. It sticks a lot more than previous versions of the software for m
...
11
Replies
Actually, in CC2017.5, at least some CSS Variables do display in Live View. Here's a quick example...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test CSS Variables</title>
<style>
:root {
--main-bg-color:#645D2C;
}
ul {
list-style-type:none;
}
header ul {
background-color:var(--main-bg-color);
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</nav>
</header>
</body>
</html>
...and the display in Live View on the right...
karpiyon​,
What errors is DW giving you specifically?
pziecina wrote
If your main reason for using scss is to use variables, have you though of using css variables for your css?
I just use 'find and replace'
Heres an example:
body {
background-color: red;
}
.box {
border: 1px solid red;
}
.text {
color: red;
}
Find: 'red' replace with: 'yellow'
Result:
body {
background-color: yellow;
}
.box {
border: 1px solid yellow;
}
.text {
color: yellow;
}
I know its a bit advanced 
AdChoices