CodePen and Scss & Css

1

Hi I wonder if someone can help me.

I’m somewhat confused between Scss and Css and how codepen works…

I’ve tried copying and pasting multiple scripts from codpen with almost 0 success. I’ve looked through the code to see if there are dependencies missing and from what I can tell, no, but I’m sure there are.

Does css and scss work in conjunction or is it one OR the other?

I’ve been trying to copy this code from codepen:
https://codepen.io/93lucasp/pen/LYYMYoB

This is what I’m doing:
Create: masonry.html ->copy and paste from codepen
Create: masonry.css ->copy and paste from codepen & link in html

There doesn’t seem to be any js, It’s the scss ‘hidden’ that is confusing me. I can download or view in “view” and create a scss file from the text but when I create link to the scss file it doesn’t work.

Here is the page I have setup:
www.greglumley.com/test

Thank you,

Greg.

2

Does css and scss work in conjunction or is it one OR the other?

Scss is a css preprocessor. You can use it to ‘augment’ your styling coding capability, but you can still use base css

About codepen, you can look under settings → css and you will find the scss addition^^

3

hey @gregstah yes that codepen is using sass, if you want to use sass outside of the codepen you will need a sass compiler, if your using vs code you can use something like Live Sass Compiler add on, or you can install sass on your machine https://sass-lang.com/install

4

you can use css in a scss file like normal but you cant use sass in a css file, the way it works is when you use sass in a scss file the browser will not be able to read it, so this is where the compilar comes in and compiles the scss file into css code so the browser can read it.

5

Thank you for your answer, very helpful.

So then I presume if one were to use it in PHP you’d need some sort of class that compiles before output, would that be correct?

6

in codepen there is the button “view compiled css” when you are using a compiler and that css than you can use anywhere without a compiler being needed

image

7

SCSS is only a preprocessor as everyone already said. Unfortunately you cannot use .scss or .sass directly into an html file. You have to pre-compile it. As @ILM said, there is a feature in codepen to view the compiled version of the css.

8

Thank you for everyone’s help. It was getting my head around it is all.

9

Just for some more specific explanation on how it works.

  • As you can see here. The styles.css.map is just the compiling map. It’s like the direction for the compiler to compile from .scss to .css. As you can also see that I linked the styles.css instead of the styles.scss

    image
    image1322×728 140 KB

  • As you can see, the HTML is using the pre-compiled styles.css that was compiled from styles.scss.

    image
    image1319×691 138 KB