What is this syntax?

HTML-CSS
1

Hello, community.

I’m currently doing the first module projects.

Searching for resources, I came across this pen:
https://codepen.io/Hastalavistababy/pen/JKXQpv

What in heavens in going here? Can someone please explain me this syntax?

Thanks in advance :slight_smile:

2

The HTML is using the Pug preprocessor. It allows you to write HTML using less code (among other cool things, like using loops). You can view the actual HTML code by clicking the arrow button on the HTML editor, then selecting “View Compiled HTML”.

The same thing is happening in the CSS using the Stylus preprocessor

3

There are a couple different pre processors going on in this pen.

The HTML is written with pug which allows you to skip typing html and instead just type the class name. It also introduces all sorts of other cool perks as well.

The CSS is using Stylus, which is yet another pre processor for CSS.

A pre processor allows you to write code that would normally be impossible with the plain version of the language.

4

Thanks guys.

So, basically this is the compiler’s doing, right?

5

The compiler will take in what you see in the pen and then return a version that your browser can read.