Créer un sprite sur le framework avec Compass et SASS

Rédigé par Djb aucun commentaire

sprites

Un sprite c'est quoi ?

Un sprite est une image composée d’une sélection d’images accolées que CSS nous permet de manipuler pour en afficher seulement une partie.

 

Exemple d'un sprite avec SASS et Compass

Dans mon dossier img, je vais créer un nouveau dossier icons et, placer dedans mes images pour le sprite.

img/icons/facebook.png

img/icons/twitter.png

 

Puis ajouter dans mon fichier style.scss ces lignes :


@import "icons/*.png";

$icons-layout: smart;

@include all-my-icons-sprites(true);

 

Compass vas céer le sprite dans le dossier icons et réaliser ces lignes de CSS


.icons-sprite, .icons-facebook, .icons-twitter {
     background: url('/img/icons-s9ff2487081.png') no-repeat;
   }

.icons-facebook {
     background-position: 0 0;
     height: 11px;
     width: 12px;
   }

.icons-twitter {
     background-position: 0 -11px;
     height: 12px;
     width: 13px;
   }


 

Il suffit de passer les class .icons-*  en display inline-block

 


[class*=" icons-"] { display: inline-block; }

 

Rapide non ? J’en avais marre de jouer avec la règle de photoshop....

 

Classé dans : Tutoriel Mots clés : Sprite, Compass, SASS

A propos de l'auteur, Djb:

Fort de notre expérience dans la création et l'intégration de projets web, l'équipe Psd-HTML vous accompagnons dans la définition de votre charte graphique et la réalisation de votre projet Web - Intégrateur chez psd-html.fr

 

Écrire un commentaire