[Solved] What is the purpose of compiling css/scss? [closed]

Question

I’m confused. The question title refers to compiling CSS/SCSS, the question refers to compiling PHP/HTML. Since you tagged the question with sass, I’m assuming you’re trying to ask why we need to compile SASS to CSS, instead of just being able to include the SASS file into our projects?

If that is your question, it’s because SASS is not always valid CSS by itself. It’s a more developer-friendly way to write CSS, because in SASS we can inherit styles. For instance, we can define a basic CSS class that sets the font size and weight (e.g. .arial-big), and then we can inherit that in other classes that set the color (e.g. .arial-big-red and .arial-big-green). We don’t have to set the font size and weight in those classes, because we can just inherit from .arial-big. Basic CSS does not support doing that. If you never use any of those features and your SASS files contain already-valid CSS code, then why are you using SASS anyway?

Now that’s a really simplistic example, it’s usually far more complicated than that, and it’s possible to inherit from multiple CSS classes in SASS. But like I said, this is not valid in regular CSS, so we need to compile our SASS into basic CSS that browsers will understand.

If you want to automatically compile your SASS to CSS whenever it changes, that’s quite possible. The JetBrains suite of editors support file watchers that can automatically trigger a command when a file is changed. You can set that up to call the compiler when you hit CTRL+S on a SASS file. If you’re using a different editor, they might have similar functionality or you can probably do the same using basic OS features. I’m not sure about Windows, but in Linux you can use inotify/incron and OS X has its own file watcher features that you can hook into to call the compiler when a file changes.

Edit: To add to this, if you’re using SASS in a PHP project, there are libraries available that compile SASS to CSS on-the-fly when the visitor tries to load the CSS. Instead of using a <link> tag pointing to a pre-compiled CSS file, you can have one that points to a PHP file belonging to that library, and it will compile the SASS files at that time. An example of this is panique/php-sass.

Accepted Answer

I’m confused. The question title refers to compiling CSS/SCSS, the question refers to compiling PHP/HTML. Since you tagged the question with sass, I’m assuming you’re trying to ask why we need to compile SASS to CSS, instead of just being able to include the SASS file into our projects?

If that is your question, it’s because SASS is not always valid CSS by itself. It’s a more developer-friendly way to write CSS, because in SASS we can inherit styles. For instance, we can define a basic CSS class that sets the font size and weight (e.g. .arial-big), and then we can inherit that in other classes that set the color (e.g. .arial-big-red and .arial-big-green). We don’t have to set the font size and weight in those classes, because we can just inherit from .arial-big. Basic CSS does not support doing that. If you never use any of those features and your SASS files contain already-valid CSS code, then why are you using SASS anyway?

Now that’s a really simplistic example, it’s usually far more complicated than that, and it’s possible to inherit from multiple CSS classes in SASS. But like I said, this is not valid in regular CSS, so we need to compile our SASS into basic CSS that browsers will understand.

If you want to automatically compile your SASS to CSS whenever it changes, that’s quite possible. The JetBrains suite of editors support file watchers that can automatically trigger a command when a file is changed. You can set that up to call the compiler when you hit CTRL+S on a SASS file. If you’re using a different editor, they might have similar functionality or you can probably do the same using basic OS features. I’m not sure about Windows, but in Linux you can use inotify/incron and OS X has its own file watcher features that you can hook into to call the compiler when a file changes.

Edit: To add to this, if you’re using SASS in a PHP project, there are libraries available that compile SASS to CSS on-the-fly when the visitor tries to load the CSS. Instead of using a <link> tag pointing to a pre-compiled CSS file, you can have one that points to a PHP file belonging to that library, and it will compile the SASS files at that time. An example of this is panique/php-sass.