Sass/Compass changing sprite image path
Sprite画像のパスを書き換える

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

Grunt.js is one of the hot trends in JS world today.
I am also applying it to my projects and taking advantage of it.
One of my projects implements Compass sprite image solution and we need to change the path automatically generated by it.
This is because the following.

Minifying & move CSS

The directory for images, scss, and css files is like this.
The images under “/image/sprite-icons/sprites” are automatically merged and turn into a sprite image “sprites.png”.

A scss “main.scss” will be compiled to a css “main.css” at “/style/sp/work”.
Grunt will minify “main.css” and move it to the upper layer “/style/sp/” as “style.min.css”.
This causes a problem because the sprite paths in minified “style.min.css” do not work because the paths are relative from original “main.css”.

It must be..

Therefore, the paths need to be replaced to correct ones.

Customise config.rb

Sass config.rb can handle the text replacement.
The following realises what you expect.

L36 is the function to replace the relative paths and sprites names in “main.css”.

Sass/Compass CSS Sprite folder customising
– アイコン一式を異なるフォルダに

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

Standard

The standard CSS sprite with Compass commonly takes the following structure where the generated sprite image and the icon folder are in the same folder.

This can be realised with the following config.rb and mixin.

config.rb

Mixin

Paths are relative with one specified (images_dir) in config.rb.

Custom

What if you do not want to get them in different directory like this?
For example, I worked on a project with the following structure.

config.rb

The sprite image will be generated in “generated_images_dir”, while the icons are in “sprite_load_path”.

Mixin

The path is relative with “sprite_load_path”;

SCSS

autoprefixer – post-processor for CSS -

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

Sass and Less both are well known as CSS pre-processor.
The autoprefixer is a post-processor which handles vendor pre-fixes in compiled CSS.
»ai/autoprefixer

This tool is based on Can I use, so you don’t need to check the latest prefix matter by browsing it. :)

Example

CSS

CSS post-processed

Actually, CSSO will optimise the post-processed CSS by minifying it.
This time introduces how to bundle autoprefix to compass.

Install

Just run gem install.

Settings

Add the following codes to config.rb as follows.

That’s it! You are ready for tasting the awesome tool!

Result

SCSS

CSS

CSSO optimises the code by minifying.

Sass extending clearfix() mixin

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

Sass/Compass clearfix() mixin

Sass/Compass provides clearfix mixin as follows.

Scss

CSS

The above code sometimes behaves weird when a floating contents inside has an absolute positioned element which exceeds the wrap container.
»  With default clearfix mixin

Screen Shot 2013-10-24 at 5.21.41 PM

Customising

Override the default clearfix().

SCSS

CSS

»  With customised clearfix mixin
Screen Shot 2013-10-24 at 5.40.02 PM