Main differences between structuring CSS with PHP and LESS / SASS

Question

Main differences between structuring CSS with PHP and LESS / SASS

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

In many projects I have been writing CSS with PHP , which is a practice that is very unknown but that attends to all the dynamization needs, for 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 have the same proposal, so what's the difference when compared to PHP ? Is there any problem writing CSS with PHP ?

php css sass less

asked by anonymous 12.09.2017 / 15:59

2 answers

2

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

<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 the less to css on the server side too, using Node.js or third party libs.

Note that people usually convert the LESS and SCSS / SASS files, eg with LESS, to the command line:

lessc meusestilos.less meusestilos.css

Example with SCSS:

sass input.scss output.css

As I mentioned before it is possible to use Node.js directly on the server side, but you may not have Node.js on your server, there are 3rd party solutions I mentioned earlier to "compile" (process) LESS, SCSS and SASS with PHP for CSS:

Note: SASS has a number of tools for different languages, which they themselves indicate: link

One important thing to mention is that LESS and SASS / SCSS have many ready-made functionalities, of course, if you only use the basics of CSS, then your PHP script should answer well, perhaps you want more functionality so it would be interesting to study one of them , less or scss, the choice goes according to your need.

Enjoy and read about this:

What's the difference between SASS and SCSS

12.09.2017 / 16:09

Jtable currency format java.lang.StackOverflowError: stack size 1038KB

score 1 · Accepted Answer

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

LESS file taken from link :

@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 code above:

.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);
}

Notice that the syntax is very close. Many tools even implement a syntax when they know it will be officially implemented in CSS in the future. For example, I've seen tools that used mixins from the grid exactly with the grid syntax that is present in the CSS today. This allows the developer to be able to migrate to the latest CSS without changes to their code.

Already, providing the CSS code via PHP does not present any serious problems. By correctly sending the HTTP response headers and properly formatting the CSS, you will have no problems. One difference is that while tools like Less / Sass generate a static CSS file, PHP will generate the file for 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 HTTP response headers, especially cache-related ones.

Below is a compiled list of differences cited. The sign next to it indicates which tool has the best results for each characteristic as I see it:

Code syntax;

LESS / SASS approximate their syntax for vanilla ; ✓
PHP has a completely different syntax;

Response time;

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

Need for HTTP response headers;

LESS / SASS headers are managed by the server itself; ✓
PHP requires you to manually control the headers;

Managing HTTP Headers;

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

Another possible difference may also be the possibility of sending CSS via server push of HTTP / 2. I do not know if form forms would be possible in an equivalent way.