Scout-App: Un puissant préprocesseur CSS !
29, August 2017Le CSS c'est bien mais l'améliorer c'est encore mieux... Scout-App est un puissant outil de preprocessing capable d'ajouter des fonctionnalités supplémentaires au CSS, facilitant le travail des webdesigners...
Remettons un peu d'ordre dans tout ça
Scout-App est en réalité une IHM libre et open-source intégrant l'outil Sass, qui lui se manipule en ligne de commandes et basé sur Ruby. Ainsi, en à peine 1 min de prise en main, on est capable d'utiliser les fonctionnalités Sass avec Scout-App.
Qu'est ce que Sass ?
Sass est un préprocesseur CSS qui ajoute des fonctionnalités supplémentaires à la construction d'un fichier CSS.
En partant d'un fichier scss ou sass, on génére un fichier CSS.
On peut ainsi:
- Ajouter des variables
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
- Hierarchiser les balises CSS
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
}
- Rendre modulaire les fichiers
// _partial.scss
ul {
li {
}
}
// template.scss
@import "partial";
body {
}
- Faire des mixins (ou fonctions de préprocesseur)
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
- Etendre les propriétés CSS
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
- Faire des opérations
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}
Et Scout-App dans tout ça?!
Scout-App est une interface simple et épurée qui intégre les fonctionnalités Sass et s'execute en arrière plan.
On a juste à y renseigner le dossier d'entrée, le dossier de sortie et l'environnement de génération, puis lancer la surveillance du projet.
J'ai découvert Scout-App lorsque je voulais prendre en main l'outil Sass, et je dirais que cette IHM m'a beaucoup aidé dans la compréhension son fonctionnement.
Je vous laisse le découvrir et/ou apporter des commentaires
A plus pour le prochain article !
Add a comment