Automatically generate icons Sprite using sass mixins

Article Introduction: Sass mixins--supports retina icons Sprite.

Retina Sprite Icon--the front-end staff on your site can easily be automatically generated using SASS Mixins. However, you need to install sass and compass in your project to work properly.

Depending on the setup steps you can set your own Compass . If you want to automate and fully control your own development resources, I strongly recommend that you read "extended Details" later.

Easy to integrate

Let's start with a very simple example of how to use it. If you have already downloaded the package, you will find a food-icons.css file in your directory. And there are 18 pictures in your img/food-icons in the table of contents. You'll also find two directories named 120 and 64, both of which contain images generated in two other subdirectories for normal screen and retina display. We'll show you how to build the details and extend the details.

First let's look at the HTML tags and the CSS naming conventions where the icons are used. You can add these build icons to any element. I recommend using a element, as follows:

is used for this package, which is all 18 sets of icons you need to use. You can find 18 icons, and the class name takes icon-name .

Extended Details

Are you familiar with sass and compass? Creating a "Food icon" that supports the Retina screen on your site can be easier. The Sass Mixins package with a retina icon in the themestent framework contains a custom Sass(Scss) Mixins . In the directory you define, you can use Retina mixins automatic generation and management of sprites diagrams. The next step is to guide you through how to generate icons and how to use sass mixins.

Download and install

Download

Download or clone packages from GitHub. If you are using a command terminal, you can follow these steps:

Create a new directory and clone a file library

### 创建新文件夹 ###
			
 

  

 
   
 
    
After cloning, the file contains the file structure as shown in the following figure.
 
   

  
 
 
Installation
 
If your package is downloaded or cloned successfully, you can see a named directory in your directory food-icons-sprites . Include a file in this directory to config.rb complete the compass configuration. You can also see a package.json and a Gruntfile.js file that is used to run several automated tasks.
 
In this example, you can use watch compass and LiveReload modify any of your files in the browser. It also includes a script file called Bash INSTALL.sh (please read the relevant instructions below) for Windows users. We first need to run this bash script to create the necessary environment so that Compass , Grunt任务管理器 and other necessary installation package programs can function properly.
 
Please make sure that the latest version is installed on your system Node.js (the latest version is 0.8). You can click here to download the Node.js installation package. I strongly recommend that you read the "How to install Node.js" content in the installation package.
 
OK, it's already installed in your system Node.js . Great! Now we can start the installation by running a simple one-line command. It will include the necessary packages, as well as some of the management components needed for the front-end tasks.
 
Special attention: Windows User, Windows run the "Bash" script on, you can download and install it.
 
Install the required packages
 
### 进入文件夹 ### cd icon-sprite ### 运行Bash脚本 ### bash INSTALL.sh ## 安装成功后，你会看到下面的信息 ###
			"*****************************************"; "*****************************************"; "*********   PACKAGE SETUP DONE   ********"; "*****************************************"; #### 准备启动Grunt任务管理器 ###
			
 

   

 
    
 
     
If bash INSTALL.sh you are running a partial feature installation failure, it is recommended that you enter a command at your terminal sudo bash INSTALL.sh .
 
    

   
 
After running the command, Grunt will run a series of heavy tasks. You can see some of the information below.
 
Grunt Start processing
 
Running "clean:server" (clean) task Running "coffee:dist" (coffee) task Running "compass:server" (compass) task Running "livereload-start" task ... Starting Livereload server on 35729 ... Running "connect:livereload" (connect) task Starting connect web server on localhost:9090. Running "open:server" (open) task  
 
Your browser will automatically run the following address: http://localhost:9090/. If it is not automatically opened, you can click on that link address. Grunt will use the localhost:9090 Connect Web server. In addition to app modifying any HTML , or files in the directory, the css .js browser will reload them.
 
Use Imagemagic to create your own icons
When running INSTALL.sh the bash script, "ImageMagick" has been installed on your system. With a few commands in the terminal, we can easily intercept the size of the picture and turn it into any format we need.
There are 18 pictures in this bag 512 X 512 . They put in /img/food-icons/original . In the food-icons directory you can find two folders 64 and 120 . originalmerge the files in the directory .png into 64 X 64 and 120 X 120 two files and place them in the dimensional . In order to support the retina screen each picture needs to be magnified twice times the size of the picture. To be more organized, I created two 64 and 120 two folders, naming them as normal and retina . Now let's go back to our terminal.
Special Note: don't forget to replace your directory file place "~/projectresources/work/grunge-food-icon-gh-pages/img/food-icons/120/normal".

Adjust image
 
cd app/img/food-icons/original for file in *.png; convert $file -resize 120x120 -quality 100 ~/ProjectResources/work/grunge-food-icon-gh-pages/img/food-icons/120/normal/$file
			for file in *.png; convert $file -resize 240x240 -quality 100 ~/ProjectResources/work/grunge-food-icon-gh-pages/img/food-icons/120/retina/$file
		
 
If all goes well, you will put all the pictures in the correct directory. We can continue the sass and CSS sections.
 
including sass Mixins and Sprite generators
To generate the sprite images we need to show on our site, I have created two different scss files and imported the required scss files.

Support for Retina screen sass Mixins
 
As mentioned previously, a custom sprite is Sass Mixins used to create a sprite that supports the Retina display screen. In the app/css/sass directory, you can find the _retina-sprite-mixins.scss file.
 
Sprite Retina mixins ( _retina-sprite-mixins.scss )
 
Retina Sprite mixins @mixin retina-sprite-background ($name, $normal, $retina) {background-repeat:no-repeat;   Background-image:sprite-url ($normal);   Background-position:sprite-position ($normal, $name);   Height:image-height (Sprite-file ($normal, $name));    Width:image-width (Sprite-file ($normal, $name));          Media Query for Retina @media (min--moz-device-pixel-ratio:1.3), (-O-MIN-DEVICE-PIXEL-RATIO:2.6/2),            (-webkit-min-device-pixel-ratio:1.3), (min-device-pixel-ratio:1.3), (min-resolution:1.3dppx) {           Background-image:sprite-url ($retina);           Background-position:0 round (Nth (sprite-position ($retina, $name), 2)/2);           Height:round (Image-height (Sprite-file ($retina, $name))/2);            Width:round (Image-width (Sprite-file ($retina, $name))/2); Treat the @2x Retina Sprite sheet as 50% wide for double resolution upon display $double-width:ceil (image-width (spri           Te-path ($retina))/2); $Auto-height:auto;          @include background-size ($double-width $auto-height);  } }
 
Generate Sprite Chart
 
Import files into a file to create a sprite food-icons.scss _retina-sprite-mixins.scss diagram. and specify the class name for each icon according to the food icon name. Here are all the code snippets:
 
Food Sprite Chart ( food-icons.scss )
 
 
 
Special Note: You may have a good idea of how to pass in the name of the icon in the retina-sprite-background() mixins argument. However, these icons require the same height and width for each icon size. In addition make two sprite-map . One is for the normal display screen, the other is for the Retina display screen.
 
CSS for each icon
 
So here it is! This means that you have no problem completing the above steps. If running is no problem, you need to prepare a CSS class name for each food icon, and the following example is the CSS that generates the beer icon:
 
Generate Retina Style
 
/* Beer Icon class */icon-beer {background-repeat:no-repeat; Background-image:url ("..
					/img/food-icons/120/normal-s8778c84cbc.png ");
					Background-position:0 -360px;
					height:120px;
					width:120px; } @media (min--moz-device-pixel-ratio:1.3), (-O-MIN-DEVICE-PIXEL-RATIO:2.6/2), (-webkit-min-device-pixel-ratio:1.3 ), (min-device-pixel-ratio:1.3), (min-resolution:1.3dppx) {. icon-beer {Background-image:url ("..
					/img/food-icons/120/retina-s7367f0e004.png ");
					Background-position:0 -480px;
					height:120px;
					width:120px;
					-webkit-background-size:120px Auto;
					-moz-background-size:120px Auto;
					-ms-background-size:120px Auto;
					-o-background-size:120px Auto;
					background-size:120px Auto; }   } 
 
That's all you need to do. Easy, right? I'm pretty sure you might have a problem with this sass mixins. If you have any questions, you can submit your questions to the GitHub.
 
Translator's Sign Language: the entire translation is carried out according to the original line, and in the process of translation slightly individual understanding of the technology. If the translation has the wrong place, but also please peer friends pointing. Thank you!
 
Original English: http://themestent.github.io/retina-icon-sprites/
 
Chinese translation: http://www.w3cplus.com/preprocessor/retina-icon-sprites.html