Feuilles de style syntaxiquement impressionnantes utilisant Compass dans Sass
Dans notre dernier post, nous avons déjà parlé de Compass. Selon le site officiel, il est décrit comme un framework de création CSS open-source.
En bref, Compass est une extension Sass et, à l'instar de LESS Element of LESS, il contient un ensemble de mixins CSS3 prêts à l'emploi, à la différence près qu'il a également ajouté plusieurs éléments qui en font un outil compagnon plus puissant pour Sass. Regardons ça.
Installer Compass
Compass, comme Sass, doit être installé dans notre système. Mais si vous utilisez une application telle que Scout App ou Compass.app, cela ne sera pas nécessaire..
Sans eux, vous devez le faire “manuellement” à travers Terminal / Invite de commande. Pour ce faire, tapez la ligne de commande suivante;
Sur un terminal Mac / Linux
sudo gem installer compas
Sur l'invite de commande Windows
bijou installer une boussole
Si l'installation réussit, vous devriez recevoir une notification comme indiqué ci-dessous;
Ensuite, exécutez la ligne de commande suivante dans votre répertoire de travail pour ajouter Fichiers de projet Compass.
boussole init
Lectures complémentaires: Documentation en ligne de commande Compass
Configuration du compas
Si vous avez exécuté cette commande boussole init, vous devriez maintenant avoir un fichier nommé config.rb dans votre répertoire de travail. Ce fichier est utilisé pour configurer la sortie du projet. Par exemple, nous pouvons changer nos noms de répertoire préférés.
http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js"
Supprimez la ligne de commentaire générée par Compass. nous fixons vrai si nous avons besoin que les commentaires soient imprimés ou faux si cela n'est pas nécessaire.
line_comments = false
Nous pouvons également décider de la sortie CSS. Il y a quatre options que nous pouvons sélectionner :étendu, :compact, :compriméet : imbriqué. Pour le moment, nous avons juste besoin de l’élargir car nous sommes encore au stade du développement..
style_sortie =: développé
Je pense que ces configurations suffiront à la plupart des projets en général, mais vous pouvez toujours vous référer à cette documentation, Référence de configuration de Compass si vous avez besoin de plus de préférences..
Enfin, nous devons regarder chaque fichier du répertoire avec cette ligne de commande;
montre boussole
Comme dans Sass, cette ligne de commande surveillera chaque changement de fichier et créera ou mettra à jour les fichiers CSS correspondants. Mais rappelez-vous, lancez cette ligne après avoir configuré le projet en config.rb, ou alors il va simplement ignorer les modifications dans le fichier.
CSS3 Mixins
Avant de parcourir CSS3, dans notre primaire .scss fichier, nous devons importer le compas avec la ligne suivante @import "compas";, cela importera toutes les extensions dans Compass. Mais si nous n'avons besoin que de CSS3, nous pouvons également le faire plus spécifiquement avec cette ligne. @import "compass / css3".
Lectures complémentaires: Boussole CSS3.
Maintenant, commençons à créer quelque chose avec Saas et Compass. Dans le document HTML, en supposant que vous en ayez également créé un, nous allons mettre le balisage simple suivant:
L'idée est aussi simple. nous allons créer une boîte tournée avec des coins arrondis, et ci-dessous sont nos styles imbriqués Sass pour le démarreur;
body background-color: # f3f3f3; section width: 500px; marge: 50px auto 0; div width: 250px; hauteur: 250px; couleur de fond: #ccc; marge: 0 auto;
Et, pour obtenir notre rectangle aux angles arrondis, nous pouvons inclure les Compass CSS3 Mixins comme suit:
body background-color: # f3f3f3; section width: 500px; marge: 50px auto 0; div width: 250px; hauteur: 250px; couleur de fond: #ccc; marge: 0 auto; @include border-radius;
Ce rayon de la frontière Mixins générera tous les préfixes du navigateur et, par défaut, le rayon du coin sera 5px. Mais, nous pouvons aussi spécifier le rayon de notre besoin de cette façon @include border-radius (10px); .
section div width: 250px; hauteur: 250px; couleur de fond: #ccc; marge: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;
Ensuite, en tant que plan, nous allons également faire pivoter la boîte. Il est très facile de le faire avec Compass. Tout ce que nous avons à faire, c’est d’appeler la méthode de transformation, comme cela;
body background-color: # f3f3f3; section width: 500px; marge: 50px auto 0; div width: 250px; hauteur: 250px; couleur de fond: #ccc; marge: 0 auto; @include border-radius (10px); @include rotation;
Ces Mixins vont également générer ces préfixes de fournisseur fastidieux et la rotation prendra 45 degrés par défaut. Voir le CSS généré ci-dessous.
section div width: 250px; hauteur: 250px; couleur de fond: #ccc; marge: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; -webkit-transform: rotation (45deg); -moz-transform: rotation (45deg); -ms-transform: rotation (45deg); -o-transformer: faire pivoter (45deg); transformer: faire pivoter (45 °);
Compass Helpers
Les assistants sont l’une des fonctionnalités les plus puissantes de Compass. Selon le site officiel, Les compas sont des fonctions qui complètent les fonctions fournies par Sass. Très bien, examinons les exemples suivants pour avoir une image claire.
Ajout de fichiers @ Font-face
Dans cet exemple, nous allons ajouter une famille de polices personnalisée avec @ font-face règle. En langage CSS3 simple, le code peut ressembler à quelque chose comme ceci ci-dessous, composé de quatre types de police différents et il est également difficile à retenir pour certaines personnes.
@ font-face font-family: "MyFont"; src: format url ('/ fonts / font.ttf') (format 'truetype'), format url ('/ fonts / font.otf') (format 'opentype'), format url ('/ fonts / font.woff') ('woff'), url ('/ fonts / font.eot') au format ('embedded-opentype'); Avec boussole on peut faire la même chose plus facilement avec fichiers de polices () Des aides;
@include font-face ("MyFont", fichiers de polices ("font.ttf", "font.otf", "font.woff", "font.eot")); Le code ci-dessus générera un résultat identique à celui du premier extrait de code, il détectera également automatiquement le type de police et l’ajoutera à la liste. format() syntaxe.
Cependant, si nous examinons attentivement le code, vous verrez que nous n’avons pas ajouté le chemin de la police (/ polices /). Alors, comment Compass a-t-il su où se trouvent les polices? Eh bien, ne vous trompez pas, ce chemin est en fait dérivé de config.rb avec fonts_path propriété;
fonts_dir = "fonts"
Alors, disons que nous changeons pour fonts_dir = "myfonts", alors le code généré sera url ('/ myfonts / font.ttf'). Par défaut, lorsque nous ne spécifions pas le chemin, Compass le dirigera vers feuilles de style / polices.
Ajout d'image
Créons un autre exemple, cette fois nous allons ajouter une image. L'ajout d'images via CSS est une chose courante. Nous le faisons généralement en utilisant le image de fond la propriété, comme telle;
div image de fond: url ('/ img / the-image.png'); Dans Compass, plutôt que d'utiliser le url () fonction, nous pouvons le remplacer par URL de l'image() Helpers et similaire à ajouter @ font-face ci-dessus, nous pouvons complètement ignorer le chemin et laisser Compass gérer le reste.
Ce code générera également la même déclaration CSS que dans le premier extrait..
div image de fond: image-url (the-image.png);
De plus, Compass a également des aides de dimension d'image, il détecte principalement la largeur et la hauteur de l'image. Par conséquent, si nous avons besoin de les spécifier tous les deux dans notre CSS, nous pouvons ajouter deux lignes supplémentaires, comme suit;
div image de fond: image-url ("images.png"); width: image-width ("images.png"); height: image-height ("images.png"); La sortie deviendra quelque chose comme ça;
div image de fond: url ('/ img / images.png? 1344774650'); largeur: 80px; hauteur: 80px; Lectures complémentaires: Fonctions d'assistance au compas
Pensée finale
Bon, nous avons beaucoup discuté de Compass aujourd’hui et, comme vous pouvez le constater, c’est vraiment un outil puissant et nous permet d’écrire CSS de manière plus élégante..
Et comme vous le saviez déjà, Sass n’est pas le seul Préprocesseur CSS; il y a aussi MOINS dont nous avons discuté à fond auparavant. Dans le prochain article, nous essaierons de comparer, en tête-à-tête, lequel de ces deux systèmes est le mieux adapté au prétraitement de CSS.
- Source de téléchargement
