How is this even HTML / CSS? [ SOLVED ]

How is this even HTML / CSS? [ SOLVED ]
0
#1

So I’m working on the projects here. This one to be specific : https://codepen.io/freeCodeCamp/full/YqLyXB

I took a peek at the code under the hood. This HTML and CSS seems crazy.

a#top(name='home')
main
  header
    .intro-text
      p
        | Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction;  devoted to functional programming and information architecture.
      hr.star-bright
      span.skills Web Developer - User Experience Designer - Graphic Artist

How does this style work? So you don’t even have to put the paragraph content between

tags?

And what’s the deal with this css?

@use postcss-nested;
@use autoprefixer;
@use postcss-simple-vars;
@use postcss-discard-comments;

$fargglad:#722872;
$morkfarg:#592059;
$morkgra:#888;

That was at the top of the CSS file and I’ve never seen anything like it. Sorry if my questions are totally unfocused and general, but I’m just so confused.

#2

Looks like Jade and SASS to me.

#3

I just think it’s weird how they don’t teach us that or even mention it, then tell us to replicate a website that uses Jade and SASS without knowing Jade or SASS. I mean, do you really NEED them to recreate that site, or is it just kind of a convenience thing?

#4

You don’t “need” Jade or SASS - it’s just another way to do things - some people prefer it - defiently not required.

If you’d like to learn more about them see:
https://naltatis.github.io/jade-syntax-docs/
https://devdocs.io/sass/

If freeCodeCamp taught every single language and framework the site would be huge. The important thing is being able to read the documentation for a framework and get started with it quickly.

#5

Ok cool, thanks for the help :smiley:

#6

Yes, to add to nsuchy’s answer, the jade and sass will get transpiled into html and css. The browser doesn’t and can’t read jade and sass - they will be converted to html and css first. They are just (for some) an easier way to write. You’ll learn about sass later on in fcc.

To put it another way, there’s nothing you can do in jade or sass that you can’t do in html or css.