Body of Knowledge

NOT TOO SASSy

A simple REPLACEMENT for SASS

Syntactically Awesome Style Sheets - CSS extension language

Why bash SASS?


To be perfectly honest, this a not a CSS pre-processor roast at all. I am sure they are great, a real time-saver and the people who use them, find them fabulous.

No ... this is a story about why WE don't use them and how we achieve similar, or possibly better, results.

Pre-processors


A few years ago, there was a lot of talk about CSS pre-processors and how they allowed variables within style-sheets and how they made creating CSS so much easier. So we looked at it.

Sure it sounds great, but there are trade-offs:
Learning and mastering another language ...
Pre-compiling ...
Bloated style-sheets and other baggage ...
Difficult debugging and maintenance.


If it ain't broke ... don't fix it!


Then we thought, well we already have a methodology that let's us achieve most, if not all, that the likes of SASS, LAST et al do, without learning anything new or changing anything at all.

A long, long time ago ...


This story takes us back to ... well quite a number of years. In fact, it was so long ago we were still using ASP.

We were creating quite a large Website for a Client and we wanted to be able to create a look for the Site with colors and fonts that were easily changeable - in case they did't like the theme we chose.

A work-mate and I discused it for a while and eventually we came up with the idea of using ASP to insert variables into the CSS. I'm sure we were not the first to think of it but would it work?.

Well to cut a long-story should, it did; and allowed us to create an easily changeable theme for our Client (who of course wanted to change the colors as expected).

So, how does it work?


Well that is the beauty of the idea, it just ... works!

When a page loads, the Browser requests the Style-sheet specified in the link. The Web Server sees that the file requested is PHP (or whatever Server-side Language you are using) and processes it like any other PHP file.
Note: Just make sure that your program actually produces a valid style-sheet.

This gives us complete control over the CSS in our sheet. We can do whatever we like to it in a powerful language, of our choice, that we are familiar with.

Simply wrap your CSS Style-sheet in ASP, JSP, PHP, Python or whatever you like. Then replace the CSS file in your link, with the program name:

<html>
  <head>
    ...
    <link rel="StyleSheet" href="StyleSheet.php" type="text/css">
    ...
  </head>
  <body>
    ...
  </body>
</html>


Setup variables for your color scheme, fonts, backgrounds, borders etc and replace the codes in your CSS. You can add or remove sections depending on the situation and even include CSS from other files or projects.

As we said, complete control.

See the interactive example below.
Example Code: HTML

<html>
<head>
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Cache-Control" content="no-cache">
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <link rel="StyleSheet" href="StyleSheet.php" type="text/css">
   <title>101 World Net - Article: Replacing SASS</title>
</head>
<body class="iBody">
   BODY
   <h1 class="iHeader">HEADER</h1>
   <div class="iSpacer"></div>
   <form class="iForm">FORM
      <p class="iP1">PARAGRAPH ONE:<br>The quick brown fox jumped over the lazy dog's back.</p>
      <p class="iPSpacer"></p>
      <p class="iP2">PARAGRAPH TWO:<br>The quick brown fox jumped over the lazy dog's back.</p>
      <p class="iPSpacer"></p>
      <p class="iP3">PARAGRAPH THREE:<br>The quick brown fox jumped over the lazy dog's back.</p>
   </form>
   <div class="iSpacer"></div>
   <h2 class="iFooter">FOOTER</h2>
</body>
</html>

Example Code: PHP

<?php
$iBodyBG = 'rgba(0,0,0,0.5)'; // Background
$iBodyFG = 'black'; // Color (text)
$iBodyBW = 1; // Border-width
$iBodyBB = 'black'; // Border-color
$iBodyPD = 5; // Padding
...
$iPSpacerHgt = 5;
...
$iFooterBG = 'rgba(255,69,0,0.5)';
$iFooterFG = 'red';
$iFooterBW = 1;
$iFooterBB = 'orangered';
$iFooterPD = 5;
?>


This has been summarised for brevity, click here for full code.

Example Code: CSS

body.iBody {
   background: <?php echo $iBodyBG; ?>;
   color: <?php echo $iBodyFG; ?>;
   border: <?php echo $iBodyBW; ?>px solid <?php echo $iBodyBB; ?>;
   padding: <?php echo $iBodyPD; ?>px;
   font-family: "Monaco", "Times New Roman", "Helvetica", "Arial";
   font-style: normal; font-weight: bold; font-size: 1.2rem;
   text-align: center; vertical-align: middle;
}
h1, h2, div, form, p {
   border: 0; margin: 0; padding: 0;
}
div, form, p {
   font-size: inherit;
}
h1.iHeader {
   background: <?php echo $iHeaderBG; ?>;
   color: <?php echo $iHeaderFG; ?>;
   border: <?php echo $iHeaderBW; ?>px solid <?php echo $iHeaderBB; ?>;
   padding: <?php echo $iHeaderPD; ?>px;
}
div.iSpacer {
   box-sizing: border-box;
   background: <?php echo $iSpacerBG; ?>;
   color: <?php echo $iSpacerFG; ?>;
   border: <?php echo $iSpacerBW; ?>px solid <?php echo $iSpacerBB; ?>;
   padding: <?php echo $iSpacerPD; ?>px;
   height: <?php echo $iSpacerHgt; ?>px;
}
form.iForm {
   background: <?php echo $iFormBG; ?>;
   color: <?php echo $iFormFG; ?>;
   border: <?php echo $iFormBW; ?>px solid <?php echo $iFormBB; ?>;
   padding: <?php echo $iFormPD; ?>px;
}
p.iP1 {
   background: <?php echo $iP1BG; ?>;
   color: <?php echo $iP1FG; ?>;
   border: <?php echo $iP1BW; ?>px solid <?php echo $iP1BB; ?>;
   padding: <?php echo $iP1PD; ?>px;
}
p.iP2 {
   background: <?php echo $iP2BG; ?>;
   color: <?php echo $iP2FG; ?>;
   border: <?php echo $iP2BW; ?>px solid <?php echo $iP2BB; ?>;
   padding: <?php echo $iP2PD; ?>px;
}
p.iP3 {
   background: <?php echo $iP3BG; ?>;
   color: <?php echo $iP3FG; ?>;
   border: <?php echo $iP3BW; ?>px solid <?php echo $iP3BB; ?>;
   padding: <?php echo $iP3PD; ?>px;
}
p.iPSpacer {
   height: <?php echo $iPSpacerHgt; ?>px;
}
h2.iFooter {
   background: <?php echo $iFooterBG; ?>;
   color: <?php echo $iFooterFG; ?>;
   border: <?php echo $iFooterBW; ?>px solid <?php echo $iFooterBB; ?>;
   padding: <?php echo $iFooterPD; ?>px;
}

Interactive Example

Modify CSS via PHP variables

ElementBG ColorFG ColorBorderBord ColorPadHeight
Body
Header
Spacer
Form
P1
P2
P3
PSpacer
Footer

Each select object has an onchange event that posts the page's form to the iFrame above.

The iFrame contains a PHP page that extracts the posted fields and then effectively, updates the CSS - modifying the HTML element's colors.


PLEASE NOTE:
Parameters have been removed to suit the available width of the Window or Device.

Conclusion:
So there it is, pretty simple heh!

Of course, it is only a simple page but it demonstrates how we have full control of what is in the CSS:
No compilation ...
Un-bloated ...
Simple to understand and modify ...
In the language of YOUR choice.


You can also cut out sections, and insert sections (for various situations or Device types/widths) with a simple if statement or block.

Give it a try with a Server-side language, we're sure you'll love it.

If you have any comments, questions or criticisms please contact us here.
Tim StiX - Nov 2020
Tim StiX is a Software Engineer with over 20 years experience in Net Technology.
See timstix.com for more information.
© 2020 www.101world.net ℗ 2020 www.101world.net

The BoK ... brought to you by 1.01 World Net

The BoK is a Book, a Body of Knowledge,
a collection of Articles, a Knowledge Base
of interesting and useful Information.