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:
<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> | |||||||||||||||||||||||
Example Code: PHP
<?php | |||||||||||||||||||||||
Example Code: CSS
body.iBody { | |||||||||||||||||||||||
Interactive Example
Modify CSS via PHP variables
Each select object has an onchange event that posts the page's form to the iFrame above.
| |||||||||||||||||||||||
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. | |||||||||||||||||||||||
| |||||||||||||||||||||||
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: |
Home |
Articles |
About Us |
Privacy |