Dynamic CSS Sprites Using Saas and Compass

Posted: September 29, 2015 in Magento2

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
// 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);}
.facebook-icon {@include icons-sprite(facebook);}

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s