What's new in Sasson v2.5
There was a lot happening on the dev branch lately and now time have come to release all this work to the wild in the form of a 7.x-2.5 release.
I thought I should do a quick review of what happened since 2.4 so you won't miss anything, here it is -
Clear cache now recompile Sass
alt+c clears caches
File watcher now supports <link>
tags
Debugging - force recompile
Compass URL helpers
Image sprites generator
### Clear cache
If you have dev mode turned on, your Sass files are recompiled whenever they change, and can even update your browser if you use the file watcher, but on production, with dev mode off and CSS aggregation turned on, you had to go to theme settings, recompile your Sass files and then flush your CSS cache to get the changes.
That was an issue that bugged me from day one. not anymore.
Now you can simply clear your cache to recompile all of your style sheets and **regenerate all of your image sprites** (yeah, I'll get to that).
### alt+c clears caches
If we're clearing cache, let's do it with style alt+c.
As simple as that, keyboard shortcuts are faster and time is money, so if you find yourself looking for that admin-menu "flush cache" link every once in a while just use alt+c.
This assumes you have admin-menu installed (to provide the hook_menu), on the latest version of admin menu alt+c will clear your CSS and Javascript cache (instead of all caches), which is a much faster way to force recompilation of Sass files.
### File watcher now supports <link>
tags
Sasson's file watcher (you know, the script that updates your browser whenever you save a style sheet without refreshing the page) was assuming your style sheets were all called as @import
s which is usually true with Drupal 7, but not always.
Now it will look for style sheets called as <link>
tags too.
### Debugging - force recompile
On older versions of Sasson, dev mode would recompile your style sheets on every page request, that actually didn't took that long, but it made no sense. so on one of the later versions we made it so that Sass files will recompile only when they change. but then we thought that on some occasions, probably for syntax debugging, you might actually want them to recompile over and over.
Now you have a check-box on your theme settings page under the "SASS / SCSS settings" tab to force recompilation of your Sass files, image sprites too.
As a side note, I have also removed the check box to force rebuilding of theme registry, who does that anyway ?
### Compass URL helpers
You know Compass URL helpers ? if you don't, you should, because now Sasson supports those too.
Basically they allow you to define an images (or fonts, or stylesheets) directory, and reference it in your Sass using image-url('filename')
so you have something like:
body { background: image-url('body-bg.png') repeat-x 0 0 #fff;}
By default, those functions will point to the /images
, /styles
and /fonts
directories under the root of your theme, but you can set a different path on your theme settings page under the "SASS / SCSS settings" tab.
This useful feature can be used for example to easily move you images to a different (CDN) server when moving the site to production or for simply restructuring your theme's directory.
### Image sprites generator
Image sprites are important, they really are, they minimize http requests and save time both for our users and for our servers. the problem with them is maintenance.
It is very hard and time consuming to manually build efficient sprites and it is even harder to maintain them when a project grows.
I have always wanted a simple tool that will let me use my images and seamlessly build me sprites in the back-end.
Now lately Compass for ruby can do that, but our version of compass couldn't, that's a shame, we should fix this. so we did.
Sasson now includes an image sprite generator. it will build the image for you, and will calculate all the background positions for you. you only need to know the image file name.
This is how it works -
Under your sub-theme's /images
directory you will find a /horz
, /vert
and /smart
directory.
The images in the /horz
directory will compile into a horizontal sprite (e.g. for vertically repeating backgrounds).
The /vert
directory will produce a vertical sprite.
The /smart
directory will produce an image sprite that will position all the images on the smallest area possible.
You can create as many sprites (directories) as you like, as long as the directory names have horz/vert/smart in them (e.g. smart2).
After you have your images in a directory, in you .scss file, you may do something like that:
@import "sprites/DIRECTORYNAME";
This will generate an image sprite out of your the images in the DIRECTORYNAME directory, after you have created your sprite, you can use it by simply:
@include sprite-DIRECTORYNAME-IMAGENAME;
So in the end you get something like:
@import "sprites/smart";.selector { @include sprite-smart-icon;}
**See that ? no more background position ! you can even add more images to the sprite, regenerate a whole new sprite, background positions change completely, you couldn't care less.**
Now that's not all. by default you will get the background image, position, and the specified selector will also get the width and height of the original image.
If you also want the selector's text to hide (the so called - CSS Image Replacement technique) you can simply pass a true
argument to the @include
, like so:
.selector { @include sprite-smart-icon(true);}
If you don't want the width and hight set on the selector you can pass a second false
argument:
.selector { @include sprite-smart-icon(false, false);}
This will only give you the background image and position.
Oh, last thing, Sassons demo site is up again, needs work, but still...
Anyway, as you can see, Sasson v2.5 is pretty exciting, don't you think ?
Try the new Sasson. and please share your experience.