Create CSS3 just got a little SASSy.

2nd January 2014

Happy new year everyone and welcome to 2014!

Every year I get a bit of time off over the holiday season and I like to spend a portion of that time fixing up my websites and working on my side projects. This years mission was to overhaul and integrate 4 of my key sites together (My Personal Website, This Blog, Digital Cake Podcast & Create CSS3).

Today I want to talk about Create CSS3.

One of my key missions with Create CSS3 last year was to make it known among developers – there was no doubt in my mind it’s the best CSS3 generators for developers to quickly generate their CSS3 code. What I needed was for it to go viral, so I added some social sharing buttons last year and encouraged people to share it. For a long time it sat on 20-30 shares per network, then one day it hit the turning point. Typanus.net shared it, then the world started sharing it! At one point I was getting thousands of visitors a day!

It’s safe to say a lot of developers have now seen and know of Create CSS3 – thank you to everyone who shared it!

Today I launched an updated version of Create CSS3 – I had a couple of missions to accomplish:

The first was to clean up the code and strip out any unnecessary prefixes, I have done this for a number of properties now so your code can be just a cross browser, just shorter.

The second was to add support for a CSS3 pre-processor I use all the time called SASS – in particular Compass. For those who aren’t familiar, SASS is a CSS3 pre-processor that makes coding CSS3 so much faster, and cleaner. I began using it mid last year and haven’t turned back since. Compass is a framework that uses SASS which makes coding SASS faster. Just to re-cap, SASS makes coding CSS faster, Compass makes coding SASS faster.

One of the things I’ve found myself doing with Compass though, is I spend a lot of time on the docs finding the CSS3 codes as many of them don’t follow the same CSS3 formatting. So if you’re like me, I’ve just made you job a little faster again. At the top of Create CSS3 you’ll now see a toggle to switch the generator to make Compass code. This switches any code you generate into Compass format so you can copy and paste multiple styles in seconds. You’re welcome.

Screen Shot 2014-01-02 at 9.48.56 am

If you don’t use any CSS pre-processors I would suggest looking into them. They do require a little tech knowledge and delving into the daunting depths of Terminal (or whatever the Windows alternative is). They do make life easier though. A few popular options are SASS and LESS. SASS with Compass is my personal preference.

Categories: CSS, CSS3, Resources

Tags: Compass, Create CSS3, CSS3, LESS, SASS


« Back

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/jasonsto/thewebdevelopmentblog.com/public_html/wp-includes/plugin.php on line 571