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

by

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.

More Related Contents:

  1. Getting links from db and displaying them in another div [closed]
  2. Scrollable PHP Table [closed]
  3. Date format using dd/mm/yyyy using HTML
  4. how to make css work with php? [closed]
  5. Form submit file attach
  6. How do I write a CSS for mouse hover [duplicate]
  7. Login form using HTML
  8. Divide php echo rows into 3 columns
  9. How Can I add HTML And CSS Into PDF [closed]
  10. Seo Friendly URL results in CSS IMG and JS not working
  11. How to write specific CSS for mozilla, chrome and IE
  12. How to import/include a CSS file using PHP code and not HTML code?
  13. Easiest way to alternate row colors in PHP/HTML?
  14. Hiding a Div using php
  15. Multiple javascript/css files: best practices?
  16. Scroll bar for Datalist in HTML5
  17. Continuing overflowed text in a different div?
  18. HTML PHP Progress Bar
  19. PHP – Check if the page run on Mobile or Desktop browser [duplicate]
  20. How to wrap long lines without spaces in HTML?
  21. Add class=”active” to active page using PHP
  22. PHP E-mail Form Sender Name Instead Of E-mail?
  23. html5 display as image rather than “choose file” button
  24. How can I get the destination URL using cURL?
  25. Strip HTML tags and its contents
  26. How to display two table columns per row in php loop
  27. Which function in php validate if the string is valid html?
  28. how do you detect if your website visitor came from a google search result?
  29. Regex ignore URL already in HTML tags
  30. DOMDocument::loadHTML error

Leave a Comment