sass
Compas CSS3 Mixins
Recherche…
Introduction
Guide de mise en route à l'aide de l'existant Sass Compass. Compass est très utile avec CSS3 car il fournit des mixins pour écrire une 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.
Mettre en place l'environnement
Ouvrez votre ligne de commande
Installation à l'aide de Ruby
gem update --system
gem install compass
Créer un projet
compass create <myproject>
Cela initialisera un projet de compas. Il va ajouter un dossier appelé. Le dossier ressemblera à la structure suivante:
| Dossier de fichiers | la description |
|---|---|
| toupet/ | Vous placez des fichiers sass / scss dans ce dossier |
| feuilles de style / | Dans ce dossier, votre css compilé sera stocké |
| config.rb | Configurer la boussole - par exemple, chemin du dossier, compilation sass |
Utiliser boussole
compass watch
Cela compilera vos fichiers sass à chaque fois que vous les modifierez. Le chemin du dossier sass peut être modifié dans le fichier config.rb
Utiliser CSS3 avec compas
Vous pouvez trouver une référence complète sur les composants CSS3 pris en charge sur cette page.
Pour 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 voulez utiliser la boussole
@import "compass/css3";
Rayon frontière
Incluez border-radius avec compas 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. Placez juste @include devant et utilisez () pour définir votre valeur.
Exemple de Flexbox
.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 à craindre d'avoir oublié de définir un composant CSS3 pour un navigateur donné. Si le navigateur prend en charge la fonctionnalité CSS3, le compas le définira pour vous.