Sass contre Compass – Critique

compass est une bibliothèque d'outils pour sass
compass encapsule une série de modules utiles basés sur sass pour compléter et enrichir les fonctionnalités de sass

Installation :
compass est Il est développé en ruby ​​​​. langue, donc Ruby doit être installé avant de l'installer.
Commande :

gem install compass
Initialisation du projet :
Pour créer votre projet Compass, si le nom du projet est myproject
compass create myproject
sera dans le courant This Le répertoire est généré sous le répertoire, qui contient le fichier config.rb, et deux sous-répertoires, sass et stylesheets, le premier stocke les fichiers sources sass, et le second stocke les fichiers
css compilés.

Compilation :
Ce que j'ai écrit pendant le développement était un fichier avec le suffixe de fichier scss. Ce n'est que lorsqu'ils sont compilés dans des fichiers CSS qu'ils peuvent être utilisés sur le site Web. La commande de compilation de
compass est
compass compile
. Cette commande est exécutée dans le répertoire racine du projet. Elle compilera le fichier scss dans le sous-répertoire sass dans un fichier css et l'enregistrera dans le sous-répertoire des feuilles de style.
Le fichier CSS compilé par défaut contient beaucoup de commentaires. L'environnement de production nécessite des fichiers CSS compressés
compass compile --output-style compressé
Si vous recompilez le fichier non modifié
compass compile --force
En plus d'utiliser les paramètres de commande, vous pouvez également spécifier le mode de compilation dans le fichier de configuration config.rb.

output_style = :expanded
:expanded signifie conserver le format d'origine après la compilation. Les autres valeurs incluent : imbriquée,
:compact et compressée. Après être entrée dans la phase de production, elle doit être modifiée en. :mode compressé.
output_style = :compressed
Vous pouvez également déterminer intelligemment le mode de compilation en spécifiant la valeur de l'environnement (:production ou:development).

environment = :development
output_style = (environment == :production) ? :compressed : :expanded

En mode ligne de commande, en plus des commandes de compilation uniques, Compass également a une commande de compilation automatique

compass watch
Tant que le fichier scss change, il sera automatiquement compilé en un fichier css.

modules Compass

Compass adopte une structure de modules. Différents modules fournissent différentes fonctions, et il y a 5 modules intégrés.
réinitialiser les unités de typographie de mise en page CSS3

module de réinitialisation

Avant d'écrire vos propres styles, il est nécessaire de réinitialiser les styles par défaut du navigateur.
La méthode d'écriture est :
@import "compass/reset"
La commande @import ci-dessus permet de préciser le module à charger, ici il s'agit de charger le module de réinitialisation. Après compilation, le code de réinitialisation CSS correspondant sera généré.

Module CSS3
Ce module fournit 24 commandes CSS3. Par exemple :
Méthode d'écriture aux coins arrondis (border-radius),
@import "compass/css3";
.rounded {
@include border-radius(5px);
　}
La commande @include ci-dessus signifie appeler un mixin (similaire à une macro en langage C 5px est un paramètre utilisé pour spécifier le rayon du congé).

Le code compilé est :
.rounded {
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
-o-border-radius : 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

Si vous avez seulement besoin Le coin supérieur gauche est arrondi, écrit
@include border-corner-radius(top, left, 5px);

module de mise en page
Ce module fournit des fonctions de mise en page,
par exemple, spécifier une page La section de pied de page apparaît en bas du navigateur.
@import "compass/layout";
#footer {
@include sticky-footer(54px);
>
Spécifiez que l'élément enfant occupe l'espace de l'élément parent :

@import "compass/layout";
#stretch-full {
@include stretch;
　}
module de typographie
Ce module fournit des fonctions de modèle
Pour exemple, précisez la couleur du lien Le mixin est :
link-colors($normal, $hover, $active, $visited, $focus);
Lorsqu'il est utilisé, il s'écrit :
@import "compass /typography";
a {
　@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
}

module utilitaires

Ce module fournit certaines fonctions d'autres modules.
Par exemple, clear flottant :

import "compass/utilities/";
.clearfix {
@include clearfix;
}
Par exemple, table :
@import "compass/utilities";
table {
@include table-scaffolding;
　}

Après compilation
table th {
text-align: center;
font-weight: bold;
>
table td,
table th {
padding: 2px;
>
table td.numeric,
table th. numeric {
text-align: right;
　}

Fonction d'assistance
En plus des modules, Compass fournit également une série de fonctions.
Il existe quelques fonctions utiles, image-width() et image-height() renvoient la largeur et la hauteur de l'image
Un autre exemple, inline-image() peut convertir l'image en données de protocole de données.

@import "compass";
.icon { background-image: inline-image("icon.png");}

Après compilation, on obtient
.icon { background -image: url('data:image/png;base64,iBROR...QmCC');}
La principale différence entre la fonction et mixin est qu'il n'est pas nécessaire d'utiliser la commande @include et peut être appelé directement.

Pour plus de Sass et Compass - pour consulter les articles connexes, veuillez faire attention au site Web PHP chinois !