Sass logo

SASS or how to DRY your CSS

I’ve read an interesting article introducing SASS.

In short: SASS (Syntactically Awesome StyleSheets) is an extension of CSS that allow you to code and organize your stylesheet using variables, nested rules, mixins and inline imports!

As outlined in the linked post it may appear as an hindrance but it isn’t: actually if your start using it you’re applying the “don’t repeat yourself” (DRY) principle… no more redundant repetition but a more clean and neat set of stylesheets!

…and it’s an open source project!!!

Steps to get started? A few:

  1. install a Sass application or the command line utility to process .scss files
  2. take a look at sass reference
  3. write a .scss file
  4. put it through one of those compiler and you get your css files!

css transformation easing

With CSS3 you can apply transformation to DOM objects.. you can do a lot of thing but basically you can translate, rotate, scale and skew. One interesting thing I discovered today is how to add a custom “easing” to that transformation: cubic-bezier!

What you have to put in your css is:

-webkit-transition: -webkit-transform .5s cubic-bezier(.82,.2,.89,.3);
   -moz-transition: -moz-transform    .5s cubic-bezier(.82,.2,.89,.3);
    -ms-transition: -ms-transform     .5s cubic-bezier(.82,.2,.89,.3);
     -o-transition: -o-transform      .5s cubic-bezier(.82,.2,.89,.3);

Instead of “cubic-bezier(a,b,c,d)” you can also use a few preset (linear, ease, ease-in, ease-out, ease-in-out).

To figure out which values put in that function you can use this useful site: cubic-bezier.com. There you can also compare curves!!!

CssWarp

Very cool tool to generate curved text path using html and css only! Technically it will generate a span tag for each letter from your text, calculate the correct css transformation and put all together.

Try it out here!

There’s also the downloadable javascript class to download from github!

CSS reset… now with HTML5

It’s been a while since I started to use a css to “normalize” – or better to “reset” – html rendering to a cross-browser base. I always used Blueprint and so far no problem but I’d like to verify if there’s something better out there.

At first a list major ones…

Blueprint

Last version 1.0.1 (May 2011)

Html5Reset (by html5doctor.com)

Last version 1.6.1 (Sep 2010)

Html5 Boilerplate

Last version 4.1.0 (Jan 2013)

…next update: review.