Boussole CSS3 Mixins

Guide de démarrage à l’aide de Sass exentsion Compass. Compass est très utile lorsqu’il s’agit de CSS3 car il fournit des mixins pour écrire 1 ligne afin de prendre en charge tous les navigateurs utilisant les fonctionnalités CSS3. Il est également intéressant d’inclure des images de sprite.

Configurer l’environnement #

Ouvrez votre ligne de commande

Installation avec Ruby #

gem update --system

gem install compass

Créer un projet #

compass create <myproject>

Cela initialisera un projet de boussole. Il ajoutera un dossier appelé . Le dossier ressemblera à la structure suivante :

Utiliser la boussole #

compass watch

Cela compilera vos fichiers sass chaque fois que vous les modifierez. Le chemin du dossier sass peut être modifié à l’intérieur du config.rb

Utilisation de CSS3 avec boussole #

Vous pouvez trouver une référence complète sur les composants CSS3 pris en charge sur cette [page][1]

Afin d’utiliser CSS3 dans votre projet, Compass fournit des mixins pour prendre en charge les fonctionnalités CSS3 dans chaque navigateur. En plus de votre fichier Sass/Scss, vous devez spécifier que vous souhaitez utiliser la boussole

@import "compass/css3";

Bordure-rayon #

Incluez border-radius with compass dans votre fichier sass :

div {
    @include border-radius(4px);
}

Sortie CSS

div {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

Comme vous pouvez le voir, vous pouvez utiliser le nom CSS normal. Mettez simplement @include devant et utilisez ( ) pour définir votre valeur.

Exemple de boîte flexible #

.row {
  @include display-flex;
  @include flex-direction(row);
}

Sortie CSS

.row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
}

Conclusion #

Ce ne sont que deux exemples. Compass fournit beaucoup plus de mixins CSS3. Il est très pratique d’utiliser Compass et vous n’avez pas à vous soucier d’avoir oublié de définir un composant CSS3 pour un navigateur spécifié. Si le navigateur prend en charge la fonctionnalité CSS3, la boussole la définira pour vous.

[1] : http://compass-style.org/reference/compass/css3/