Using compass to generate a sprites to fit the retina screen

Original: Https://github.com/Gaya/Retina-Sprites-for-Compass

Adding the retina variant to compass allows you to use sprites (image sprite). It works just like normal sprites helpers, and it's better and easier to do with mixins.

Take a look at this example to see the results.

Problem

You want your site to work with Retina pictures on the HD screen instead of the non-HD screen. Compass's hybrid solution makes it easy to use sprite technology, which will allow compass to generate two different sizes of mappings.

Because we have to develop our website to make him work on high-definition images and background image sprites and background image methods, but this can make our CSS messy. With just one call, this blend will know which image to put in the browser, and will also adjust the display, just like your normal image size.

How to use

The first thing you need to do is download this mix and put them in your local scss or sass file. Note the underscore at the beginning of this file name, which prevents compass from compiling it into a CSS file.

1. Include this mix in your scss or sass file:@import "Retina-sprites";

2. Create two subfolders in the picture folder of your Compass project, the default name is icons and icons-2x .

3, Save the Picture Wizard in this folder, the normal size in the ./icons folder, zoom in to the ./icons-2x folder. Make sure the names of these pictures are the same.

4. Use this in your. scss or. sass File:@include use-sprite (<sprite-name>) Note that there is no picture format, this is not necessary.

Installing with Bower

Bower installation Command:Bower install Retina-sprites-for-compass

(If your project is managed by Bower then you can use the command to install that mix)

What it does

Compass will generate very good picture sprites from the pictures you put in the folder, make sure to use only. png images for best results.

Using only the file name, Compass will know where this image will be generated from this huge sprite image. If the browser is running in a twice-pixel scale environment, this mix will also use the HD Variant.

The following is the CSS generated from this example:

. scss

. sprite2 {    @includeuse-sprite ("sprite2");}

. css

. sprite2 {background-image:url ('.. /images/icons-s44ec97e90e.png'); Background-position:0-25px; Background-repeat:no-repeat;    Overflow:hidden;    Display:block;    height:25px; width:25px;} @media (-webkit-min-device-pixel-ratio:2), (-o-min-device-pixel-ratio:3/2), (Min--moz-device-pixel-ratio:2), (Min-device-pixel-ratio:2), (min-resolution:144dppx) {. sprite2 {background-image:url ('.. /images/icons-2x-s93dce01c9d.png'); Background-position:0-25px; Background-size:45px 95px;        height:25px;    width:25px; }}

HD Background image

Using the same principle as sprites, I created a hybrid that can set the background and HD version.

How to use

1. Use this statement in your Scss/sass file to include this mix:

　　@import "Retina-background-image";

2. Place the pixel scale version and the HD version anywhere in the picture folder.

3, use the following statement to apply this style:

　　@include Background-retina (<filename.png>, <filename-retina.png>);

The following code will generate the following CSS:

Scss

. Background {    @include background-retina ("background.gif""  Background-2x.gif");}

Css:

. Background {    background-image:url ('.. /images/background.gif');} @media (23222), (min-resolution:144dppx) {    . Background {        background-image:url ('.. /images/background-2x.gif');        Background-size:25px 25px;    }}

First translation, if there is a mistake or incorrect translation of the place trouble pointing, thank you!!!

Using compass to generate a sprites to fit the retina screen