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 short, 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:

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


Element	BG Color	FG Color	Border	Bord Color	Pad	Height

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.

PLEASE NOTE:
This is an interactive example ONLY. Various CSS properties are modified and the iFrame is re-posted.

In a real situation, the CSS is only processed once, when the page is first loaded. A Client-side scripting language, such as JavaScript, would normally be used to modify the HTML in real time.

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.

© 2023 www.101world.net		℗ 2023 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.

Processing - please wait...

Select Theme
Blackout
Blueprint
Negative

Information:
App Id:	bok.101World.Net
Desc:	World Net BoK
Version:	1.4.1
Theme:	Blueprint
Window:
Aspect:

1.01 World Net BoK

NOT TOO SASSy

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

Processing - please wait...