Is this CSS Syntax possible? [duplicate] - css

Question

This question already has answers here:
Nested CSS styles?
(4 answers)
Closed 8 years ago.
So I was on Sass webpage learning a bit of its Syntax and saw a strange CSS Syntax that I don't know if it's posible.
Before asking I've already searched on W3School and other sites if that's posible.
Here is the code I found strange:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
My question is if this Syntax is posible, I tried it and it doesn't work.
I also thought it can be a different language and searched but found nothing.
The normal Syntax I would do to make the code above work would be like this:
nav > ul {
margin: 0;
padding: 0;
list-style: none;
}
nav > ul > li {
display: inline-block;
}
nav > a {
display: block;
padding: 6px 12px;
text-decoration: none;
}

Answer 1

SASS is a CSS preprocessor.
What is a preprocessor?
A preprocessor is a program that takes one type of data and converts it to another type of data.
It means that the code you've seen in SASS webpage isn't CSS syntax, it's SASS syntax, that is transformed in the latter after its preprocessor translates it.
The code you provided above would be transformed in something like this:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
TL;DR
Before that style is added to a webpage, it's transformed into CSS. There's no stylesheet.sass references in an HTML page.