Code

Comment écrire un CSS simple et élégant avec Compass & Sass

Beaucoup de concepteurs utilisent une sorte de pré-processeur CSS, que ce soit Toupet , MOINS ou Style . Si vous avez utilisé l'un de ces outils, vous êtes probablement également au courant que Compass est un framework basé sur Sass, et bien que son installation soit parfois rebutante, une fois que vous l'utiliserez, vous découvrirez rapidement que c'est l'une des meilleures compétences. web designer peut apprendre

Si vous n'avez jamais utilisé Sass auparavant, je vous recommande de regarder les WDD introduction à Sass.

Compass fonctionne comme un framework pour votre CSS. Lorsque vous travaillez sur un projet de grande envergure, il est facile de perdre le contrôle des choses et de trouver des choses dans votre propre CSS est un défi. Compass tente de résoudre ces problèmes, avec l'avantage supplémentaire de travailler avec les préfixes du fournisseur.

Qu'est-ce que Compass?

Comme je l’ai dit plus haut, Compass est un framework pour votre CSS qui résout certains des problèmes du langage. Il comprend également quelques outils pour accélérer et faciliter le développement:

  • comme Sass, Compass prend en charge les variables, mixins et imbrication;
  • il fournit toute une gamme de fonctions d'aide pour les images, les couleurs, la typographie et plus encore;
  • il supporte des calculs mathématiques;
  • cela aide à assurer la compatibilité entre les navigateurs.

Comme Sass et LESS, Compass est juste un outil pour simplifier la conception de sites Web.

Comment installer Compass

Compass est un joyau Ruby. Pour l'installer, vous devez d'abord installer Ruby sur votre ordinateur. Heureusement, l'installation de Ruby est simple, sous Windows, il vous suffit de télécharger cette application. Ruby Installer pour Windows , sous Mac / Linux, suivez les instructions du Site Ruby.

Une fois que Ruby est installé, l’installation de la boussole est aussi simple que cela: 

gem install compass

Cela va installer à la fois Compass et Sass.

Si vous voulez créer un projet Compass, vous devez alors taper: 

compass create /path/to/projectcd /path/to/projectcompass watch

Ces trois lignes de code signifient que chaque fois que vous modifiez un fichier Sass, elles seront automatiquement compilées en CSS.

Alternativement, vous pourriez utiliser Kit de code (Mac) ou Prepros (Windows) pour compiler le Sass lorsqu’il est enregistré.

Démarrer avec Compass

Compass est divisé en modules et pour commencer à utiliser ses utilitaires, nous devons d'abord importer le module que nous voulons dans notre fichier .scss principal. Par exemple, pour importer le module CSS3, nous utiliserions: 

@import "compass/css3";

Maintenant, nous pouvons commencer à utiliser les utilitaires et les mixins proposés par Compass pour les nouvelles propriétés fournies avec CSS3. La meilleure chose à ce sujet est que nous n’avons pas à taper les préfixes des fournisseurs encore et encore, ce qui a toujours été un problème avec CSS3.

Voici un exemple, si nous voulions créer une disposition simple en 3 colonnes avec une gouttière de 20px, en CSS, nous devions taper: 

div{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;}

Vous pouvez voir à quel point ce code devient rapidement ingérable. Avec l'aide de Compass et Sass, tout ce dont nous avons besoin, c'est ceci: 

div{@include column-count(3);@include column-gap(20px);}

Comme vous pouvez le voir, nous avons supprimé les préfixes du fournisseur, et ce qui a pris 6 lignes de CSS que nous avons réalisées en seulement 2.

Un autre exemple de CSS nécessitant beaucoup de saisie est les dégradés. Voici comment nous avons écrit un simple dégradé blanc à noir dans CSS: 

.gradient{background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #000000));background-image: -webkit-linear-gradient(#ffffff, #000000);background-image: -moz-linear-gradient(#ffffff, #000000);background-image: -o-linear-gradient(#ffffff, #000000);background-image: linear-gradient(#ffffff, #000000);}

Créer le même effet avec Compass est aussi simple que: 

.gradient{@include background-image(linear-gradient(#fff, #000));}

Non seulement cela réduit de manière significative la quantité de code, mais si vous souhaitez modifier les couleurs, dans la version Compass, il vous suffit de les modifier une seule fois.

Il y a une liste complète des raccourci CSS3 propriétés ici.

Compass comprend également des aides pour les liens, dont l’un est un véritable gain de temps. Tout d'abord, nous devons inclure le modèle de typographie comme point de départ de notre fichier Sass principal: 

@import "compass/typography"

Le module de typographie a un excellent raccourci pour les couleurs de style, comme ceci: 

a{// link colors (normal, hover, active, visited, focus)@include link-colors(red, blue, grey, red, blue);}

C'est la meilleure chose à propos de Compass; il prend le code que nous utilisons quotidiennement et nous donne des versions abrégées.

Conclusion

Cet article était juste une introduction rapide à Compass, mais si vous trouviez le sujet aussi passionnant que je le fais, alors je vous conseille fortement de consultez leur site web et explorez plus des utilitaires disponibles.

J'espère que vous envisagerez maintenant d'utiliser Compass et Sass dans vos projets, car ils sont vraiment des ajouts incroyables à la boîte à outils du concepteur de sites Web.

Utilisez-vous Compass ou Sass? Préférez-vous un pré-processeur différent? Faites le nous savoir dans les commentaires.

Image / vignette en vedette, image boussole via Shutterstock.

toupet boussole css prétraitement commencer avec la boussole comment installer la boussole rubis gemmes