Dynamic CSS Sprites Using Saas and Compass

Posted: September 29, 2015 in Magento

1.) Create a folder inside the images folder and rename it to icons
2.) Add some images in icons folder
3.) Now go to the SCSS folder and Add below code in _framework.scss

// configuration variables
$icons-sprite-dimensions:true;
 
// required for basic spriting
@import "compass/utilities/sprites";
@import "../images/icons/*.png";
 
/* Compass mixin for displaying the custom classes.
*  Make sure to commenting out the all-icons-sprites mixin, otherwise you'll have duplicated classes.
*  .creator {
*      @include icons-sprite( your_image_name);
*   }
*/

5.) Complie SCSS folder & files

6.) Now you are ready to Use Dynamic Sprites Just use below code

classname {@include icons-sprite( your_image_name);}
 
Example:
 
.facebook-icon {@include icons-sprite(facebook);}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s