Sass is fat! Use PHP code in CSS files!


All these plugins apps and extensions seem to be just bloating websites and slowing down load time. This hurts your potential customers first impressions, No one likes a slow website. The slow load times and larger file sizes will also dramatically harm your google page rank. All these WordPress themes with 10+ plugins like Jquery with all its small UIs and plugins seriously raise the download size for your site visitors. The average website size went from about 20-30kb (5 years or so ago) to over 800kb-1MB! now. This is a bit extreme for your average cell phone user, or some poor sob that is still on dial-up!

With all this SiteBloat (Yeah i just coined a new internet word!), It makes it hard to find developers these days that can actually still use proper code. For instance, Jquery, its great and can speed up the DEVELOPMENT of a website. but it STILL slows the site down a bit. Even with it on a CDN. Jquery alone is 85kb. And all it is, is a way to use JavaScript differently! Yay 85 kb to make things flash and move around. In the late 90s and early 00s, that was frowned upon….  Anyway…

We are going to start writing a couple blog post on how to make things lightweight properly. without using all these addons and plugins.

For the first instalment we will attack some of these css compilers and such. The main reason people seem to use SASS / LESS, is for the variables. like php. I get it, It makes editing things a lot easier, but how bad of a designer are you, that you have to edit the css files that often?! Write it once, compress / minify it, and you should be done. Kind of defeats the purpose of SASS or LESS to me.

So here is a simple code for you to use PHP variables in CSS files! There are a couple easy ways to do this, but this one seems to be the easiest.

Create a .htaccess file in the directory where CSS files are stored.

Open the .htaccess file and add following line

AddType application/x-httpd-php .css

Now you can include php codes in CSS files. Here is a small example

$color1 = "#999999";
$color2 = "#cccccc";
$bsize ="3";

#container {
   background-color: <?php echo $color1; ?>;
   border: <?php echo $bsize; ?>px solid <?php echo $color2; ?>;
}

Awesome!!

3 Comments

  1. Very nice post. I just stumbled upon your blog and wished to mention that I have truly loved surfing around your weblog posts.

    Post a Reply
  2. Thanks a lot for sharing this with all of us you really understand what you are talking about! Bookmarked.

    Post a Reply

Submit a Comment

Your email address will not be published. Required fields are marked *