Feuilles de style syntaxiquement impressionnantes: Utilisation de la boussole dans Sass

Advertisement

Feuilles de style syntaxiquement impressionnantes: Utilisation de la boussole dans Sass

Dans notre dernier message, nous avons déjà parlé de Compass. Selon le site officiel, il est décrit comme un cadre CSS Authoring open-source.

En bref, Compass est une extension Sass et, comme LESS Element de LESS, il a un tas de Mixs CSS3 prêts à l'emploi, sauf qu'il a également ajouté plusieurs autres choses qui en font un outil compagnon plus puissant pour Sass. Regardons ça.

Installation de la boussole

Compass, comme Sass, doit être installé dans notre système. Mais, si vous utilisez une application comme Scout App ou Compass.app, cela ne sera pas nécessaire.

Sans eux, vous devez le faire "manuellement" par Prompt Terminal / Command. Pour ce faire, tapez la ligne de commande suivante;

Sur Mac / Linux Terminal

  Sudo gem installation boussole 

Sur l'invite de commandes Windows

  Bijou de montage 

Si l'installation réussit, vous devez obtenir une notification comme indiqué ci-dessous;

Ensuite, exécutez la ligne de commande suivante dans votre répertoire de travail pour ajouter des fichiers de projet Compass.

  Boussole 

Lectures complémentaires: Documentation Compass Command Line

Configuration de la boussole

Si vous avez exécuté cette commande compass init d' config.rb compass 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" 

Retirer la ligne de commentaire générée par Compass; nous avons mis en true si nous avons besoin les commentaires soient imprimés ou false si elle n'a pas à.

  Line_comments = false 

Nous pouvons également décider de la sortie CSS. Il y a quatre options que nous pouvons sélectionner :expanded , :compact , :compressed et :nested . Pour l'instant, nous avons juste besoin d'être élargi car nous sommes encore dans la phase de développement.

  Output_style =: étendu 

Je pense que ces configurations suffiront pour la plupart des projets en général, mais vous pouvez toujours vous référer à cette documentation, Compass Configuration Reference si vous avez besoin de plus de préférences.

Enfin, nous avons besoin de watch tous les fichiers dans le répertoire avec cette ligne de commande;

  Montre boussole 

Cette ligne de commande, comme dans Sass, surveillera chaque changement de fichier et créera ou mettra à jour les fichiers CSS correspondants. Mais rappelez - vous, exécutez cette ligne une fois que vous avez fait la configuration du projet config.rb , ou bien il va simplement ignorer les modifications dans le fichier.

CSS3 Mixins

Avant la marche à travers CSS3, dans notre principale .scss fichier, nous avons besoin d'importer de la boussole avec la ligne suivante @import "compass"; , Cela va importer toutes les extensions dans Compass. Mais, si nous avons besoin que CSS3 nous pouvons aussi le faire plus précisément avec cette ligne @import "compass/css3" .

Lectures complémentaires: Compass CSS3.

Maintenant, commençons à créer quelque chose avec Saas et Compass. Dans le document HTML, en supposant que vous avez également créé un, nous allons mettre le balisage simple suivant:

  <Section> <div> </ div> </ section> 

L'idée est aussi simple; Nous allons créer une boîte tournée avec des coins arrondis, et ci-dessous est notre Sass styles imbriqués pour le démarreur;

  Corps {fond-couleur: # f3f3f3;  } Section {width: 500px;  Marge: 50px automatique 0;  Div {width: 250px;  Hauteur: 250px;  Couleur d'arrière-plan: #ccc;  Marge: 0 auto;  ...... 

Et, pour obtenir notre rectangle les coins arrondis, nous pouvons inclure la Boussole CSS3 Mixins comme suit;

  Corps {fond-couleur: # f3f3f3;  } Section {width: 500px;  Marge: 50px auto 0;  Div {width: 250px;  Hauteur: 250px;  Couleur d'arrière-plan: #ccc;  Marge: 0 auto;  @include border-radius;  ...... 

Cette border-radius Mixins va générer tous les préfixes de navigateur et, par défaut, le rayon de coin sera 5px . Mais, nous pouvons aussi spécifier le rayon à notre besoin de cette façon @include border-radius(10px);
}
@include border-radius(10px);
}
@include border-radius(10px);
}
.

  Section div {largeur: 250px;  Hauteur: 250px;  Couleur d'arrière-plan: #ccc;  Marge: 0 auto;  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  -ms-border-radius: 10px;  -o-border-radius: 10px;  Rayon de bordure: 10px;  } 

Ensuite, comme le plan, nous allons également faire pivoter la boîte. Il est vraiment facile de le faire avec Compass, tout ce que nous devons faire est d'appeler la méthode de transformation, comme ça;

  Corps {fond-couleur: # f3f3f3;  } Section {width: 500px;  Marge: 50px auto 0;  Div {width: 250px;  Hauteur: 250px;  Couleur d'arrière-plan: #ccc;  Marge: 0 auto;  @include border-radius (10px);  @include rotation;  ...... 

Ce Mixins générera également 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 {largeur: 250px;  Hauteur: 250px;  Couleur d'arrière-plan: #ccc;  Marge: 0 auto;  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  -ms-border-radius: 10px;  -o-border-radius: 10px;  Rayon de bordure: 10px;  -webkit-transform: rotation (45deg);  -moz-transform: rotation (45deg);  -ms-transform: rotation (45deg);  -o-transform: rotation (45deg);  Transformer: tourner (45 degrés);  } 

Compass Helpers

L'une des fonctionnalités les plus puissantes de Compass est les Helpers. Selon le site officiel, les aides de la boussole sont des fonctions qui augmentent les fonctions fournies par Sass. Bon, jetons un coup d'oeil aux exemples suivants pour obtenir une image claire.

Ajouter des fichiers Font-face

Dans cet exemple, nous allons ajouter famille de polices personnalisées avec @font-face règle. En clair CSS3, le code peut ressembler à quelque chose comme ci-dessous, composé de quatre types de polices différentes et il est également difficile de se rappeler pour certaines personnes.

  @ Font-face {font-family: "MyFont";  Format url ('/ fonts / font.ttf'), url ('/ fonts / font.otf') format ('opentype'), format url ('/ fonts / font.woff') ('Woff'), url ('/ fonts / font.eot') format ('incorporé-opentype');  } 

Avec Compass , nous pouvons faire la même chose plus facilement avec les font-files() des font-files() Helpers;

  @include font-face ("MyFont", font-files ("font.ttf", "font.otf", "font.woff", "font.eot")); 

Le code ci - dessus va générer un résultat qui est exactement le même que le premier extrait de code, il sera également détecter automatiquement le type de police et l' ajouter au format() syntaxe.

Cependant, si nous prenons un coup d' oeil sur le code de près, vous verrez que nous ne sommes pas ajouter le chemin des polices ( /fonts/ ). Alors, comment Compass savoir où les polices sont situées? Eh bien, ne vous trompez pas, ce chemin est en fait dérivé de config.rb avec fonts_path biens;

  Fonts_dir = "fonts" 

Donc, disons que nous changeons à fonts_dir = "myfonts" , puis le code généré sera url('/myfonts/font.ttf') . Par défaut, lorsque nous ne sommes pas en spécifiant le chemin, Compass dirigera à stylesheets/fonts .

Ajout d'image

Créons un autre exemple, cette fois nous ajouterons une image. Ajouter des images par le biais de CSS est une chose courante. Nous faisons généralement cela en utilisant le background-image propriété, comme tant;

  Div {background-image: url ('/ img / the-image.png');  } 

Dans Compass, plutôt que d' utiliser l' url() fonction, nous pouvons le remplacer par l' image-url() Helpers et similaire à l' ajout @font-face ci - dessus, nous pouvons ignorer complètement 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 {background-image: image-url (l'image.png);  } 

En outre, Compass a également des aides de dimension d'image, il détecte principalement la largeur et la hauteur d'image, ainsi au cas où nous aurions besoin d'être spécifiés dans notre CSS nous pouvons ajouter deux lignes supplémentaires, comme suit;

  Div {background-image: image-url ("images.png");  Width: image-width ("images.png");  Height: image-height ("images.png");  } 

La sortie deviendra quelque chose comme ceci;

  Div {background-image: url ('/ img / images.png? 1344774650');  Largeur: 80px;  Hauteur: 80px;  } 

Lectures complémentaires: Fonctions Compass Helper

Pensée finale

Bon, nous avons discuté beaucoup de choses sur Compass aujourd'hui et comme vous pouvez le voir c'est vraiment un outil puissant et nous allons écrire CSS d'une manière plus élégante.

Et, comme vous le saviez déjà, Sass est pas le seul CSS préprocesseur; Il ya aussi MOINS dont nous avons discuté à fond avant. Dans le prochain post, nous allons essayer de comparer, tête à tête, lequel de ces deux fait le travail mieux en prétraitement CSS.

  • Télécharger la source

Plus