#What is this mixin thingy? It is a Sass file that contains the grid CSS (Sassified) from the Blueprint CSS Framework project. Its aim is to DRY up your Haml files by allowing you to create your own classes that mix in the grid classes.
This Sass file is not transformed into CSS like other Sass files.
It creates variables like span-x
, prepend-x
, etc… that get utilized when
evaluating a Sass file that includes it.
#What is Haml? Haml takes your gross, ugly templates and replaces them with veritable Haiku. Haml is the next step in generating views in your Ruby web application. Haml is a refreshing take that is meant to free us from the shitty templating languages we have gotten used to.
Haml is based on one primary principal. Markup should be beautiful.
#What is Sass? Sass is a meta-language on top of CSS that‘s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.
#What is a Sass Mixin? Mixins enable you to define groups of CSS attributes and then include them inline in any number of selectors throughout the document.
#How do I use this mixin?
Place the blueprint_grid_mixin.sass
file in the stylesheets/sass
directory of your project and then use something like the following in one of your Sass files.
@import blueprint_grid_mixin.sass
.post
+span-8
+prepend-2
+append-4
+last
+colborder
:background-color #FFFFFF
:font-size 0.9em
#Why should I use it? Instead of your once beautiful Haml poetry looking like this...
.span-8.prepend-2.append-4.colborder.last.post
I love Blueprint CSS, but gosh darnit, my Haml is looking really funky now :(
you could have this... Enough said?
.post Hey, I found this great new way to use Blueprint CSS in my Sass!
#Still not convinced? Try out Haml and Sass yourself online. No really, I dare you! Then quickly go and download the Blueprint CSS Framework along with this mixin and just see how Haml/Sass outshines your old crusty ERB templates :)