Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can a browser know the scss files?

Tags:

browser

css

sass

I see this html template, and inspect it using Chrome inspection tool.
I'm surprised to know that my browser can detect the scss files instead of the compiled css one. Then, I push Ctrl+U to view the page source, try to find 'scss' but it gives nothing in result.
So, how does the browser know the scss files?

P.S. I'm new to scss/sass/css pre-processor things

like image 302
Terry Djony Avatar asked Dec 27 '16 10:12

Terry Djony


People also ask

Can the browser read Sass?

The web browser does not understand Sass code, though – it only understands CSS code. This means that you have to transform the Sass code into CSS code. To do this, the compiler will generate a file with the CSS code.

Can HTML read SCSS?

You can not "attach" a SASS/SCSS file to an HTML document. SASS/SCSS is a CSS preprocessor that runs on the server and compiles to CSS code that your browser understands.


2 Answers

What you are seeing is called Sourcemaps. Sourcemaps allow you to see the original source instead of the compiled CSS. This is usually used for debugging.

like image 86
Stefan Kunze Avatar answered Sep 20 '22 20:09

Stefan Kunze


You can read this article for more about Sourcemaps: https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

This is mainly used for debugging and most of the times is stripted from production environments (in this case I guess they left it for people to check the actual source code and learn as you did :P)

like image 41
George Antonakos Avatar answered Sep 17 '22 20:09

George Antonakos