Le 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.

Screenshot Scout-App

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 ! xD

Previous Post Next Post


Add a comment