Main differences between structuring CSS with PHP and LESS/SASS

Question

In many projects I’ve been writing CSS with PHP, what is a practice well unknown but that meets all the needs of dynamization, example...

CSS

<?php

header("Content-type: text/css");
$cor_fundo = "#999";    

?>

body {
background: <?=$cor_fundo?>;
}

HTML

<link rel="stylesheet" href="estilo.php" type="text/css" />

Preprocessors like LESS and SASS has the same proposal, so what’s the difference when compared to PHP? there’s something wrong with writing CSS with PHP?

Answer 1

The difference is that PHP processes in server side, that is to the user will actually get a CSS file. Since the front end does not interact directly with the back end.

LESS/SASS and the like can be processed by the browser using Javascript, which occurs in client side, example with LESS:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

However depending on the configuration you can convert Less to css on the server side as well, using Node.js or then third party libs.

Note that people usually convert LESS and SCSS/SASS files per command line, for example with LESS:

lessc meusestilos.less meusestilos.css

Example with SCSS:

sass input.scss output.css

As I mentioned before is possible using Node.js resolve directly on the server side, but just in case you can’t have Node.js on your server, there are third party solutions that I mentioned earlier to "compile" (process) LESS, SCSS and SASS with PHP for CSS:

• https://github.com/leafo/lessphp
• https://github.com/leafo/scssphp
• https://github.com/panique/php-sass

Note: SASS has a number of tools for different languages, which they themselves indicate: http://sass-lang.com/libsass

One important thing to mention is that LESS and SASS/SCSS have many functionalities ready, of course if you only use the basics of CSS, then your PHP script should fit well, if you want more functionalities then it would be interesting to study one of them, Less or scss, the choice goes as per your need.

---

Enjoy a read on this:

• What is the difference between SASS and SCSS

Answer 2

The difference is that tools like Less/Sass provide all these features of generating a dynamic CSS very close to CSS vanilla. The syntax of a Less file can easily be written and understood by a CSS developer, as it is not much different than what it is used to. Already doing this with PHP would require knowing a new language.

LESS file taken from http://lesscss.org:

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

CSS file result from above code:

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

Note that the syntax is very close. Even, many tools implement a syntax when they know that it will be officially implemented in CSS in the future. For example, I’ve seen tools they used mixins of the system of grid exactly with the syntax of grid present today in CSS. This allows the developer to migrate to the most modern CSS without changes in its code.

Already, providing the CSS code via PHP does not present any serious problems. Sending the HTTP response headers correctly and formatting the CSS correctly will be no problem. One difference is that while tools like Less/Sass generate a static CSS file, PHP will generate the file at each request; this can affect the response time of the request depending directly on the execution time of the PHP code. One of the advantages of using PHP to manage this is the ease of controlling all the headers of the HTTP response, especially those related to the cache.

Below is a compiled list of the differences cited. The sign on the side indicates which tool has the best results for each feature according to my opinion:

1. Code syntax;

   • LESS/SASS approaches its syntax to the vanilla; ✓
   • PHP has a completely different syntax;

2. Response time;

   • LESS/SASS generate a static CSS file;
   • PHP demands to be executed with each request, which can increase the response time;

3. Need for HTTP response headers;

   • LESS/SASS headers are managed by the server itself;
   • PHP demands that you manually control the headers;

4. Management of HTTP headers;

   • LESS/SASS headers are managed by the server only;
   • PHP enables you to manage all headers;

Another possible difference may also be in the ability to send the CSS via push server HTTP/2. I don’t know if forms would be possible in an equivalent way.