Still writing regular CSS? Pfft, you’re living in the dark ages! These days it’s all about two new technologies that are almost identical, so I’m going to discuss them in the same post.
The idea is dynamic stylesheets – bringing concepts we use every day in regular programming and implementing them in stylesheets to avoid duplication and make everything cleaner, nicer and more up to update with current paradigms.
So what can you do with these tools? Here is a quick overview…
Variables
Using a colour everywhere that you might want to change later? No worries, just save it as a variable and if you do need to change it at a later date, you just update the variable and it will be changed everywhere.
@myColour: #FFCC00;
.header { background: @myColour; }
.footer { background: @myColour; }
Mixins
Inheritance! What a sexy thing to have in CSS. No longer do you have to place loads of DOM references in lots of different places. Now you can just write it once and included it wherever else you need it.
.bigBorder { border: #FF99CC 10px solid; padding: 5px; }
.header { .bigBorder; background: @myColour; }
.footer { .bigBorder; background: @myColour; }
Nested rules
This one is a huge time saver! How many times have you had to reference half a dozen elements in one DOM reference? Probably very rarely, but certainly two or three tags is the every day reality. No longer though, because you can now nest your rules.
.header {
.bigBorder
a {
font-size: 200%;
}
In this example, the 200% font size will only apply to a tags inside .header, just as if you had done .header a in your DOM reference.
Operations
Want to make a header colour slightly darker? No worries, just add two colours together.
@mainColour: #FFCC00;
.header { background: @mainColour + #333333; }
But these are just a few of the features of these languages. They allow you to do a lot more – including things like full blown functions that you can pass parameters into, guards and much more.
The main difference between LESS and SASS is that LESS is a client-side JavaScript library (although has now been ported to Node) – you send the browser your .less file and include a JavaScript library that converts it. Meanwhile, SASS is a Ruby Gem that compiles a stylesheet to send to the client each time you edit your .sass file.
To find out more, visit the LESS and SASS websites.
Don't have time to check my blog? Get a weekly email with all the new posts. This is my personal blog, so obviously it is 100% spam free.
Tags: css, design, less, sass, stylesheets
This entry was posted on Thursday, July 19th, 2012 at 12:05 pm and is filed under Limited, Programming, Tech. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.