Knacss + SASS : le CSS facilité

Knacss

Fabriqué au pays des bretzels kiwis, Knacss est un framework CSS complet et léger comprenant un reset (Normalize), de la typographie, du responsive, un système de grilles pour la mise en page et plein d'autres petits codes utiles. Il est disponible en version CSS classique, Less et Sass. Pour bien comprendre sa facilité d'utilisation, voici un code pour un affichage à deux colonnes - l'affichage se fera sur une seule colonne sur mobile et tablette ("small-1" et "tiny-1" - small et tiny étant deux points de rupture) :

<div class="grid-2-small-1-tiny-1">
	<article>
		<p>Colonne 1 - ligne 1</p>
	</article>
	<article>
		<p>Colonne 2 - ligne 1</p>
	</article>
	<article>
		<p>Colonne 1 - ligne 2</p>
	</article>
</div>

Sass

Sass (à ne pas confondre avec SaaS) est un préprocesseur CSS - un langage de génération dynamique de feuilles de style selon Wikipédia. En clair, vous travaillez sur un fichier .scss qui va ensuite être compilé. Ne reste plus qu'à le minifier. Si vous avez l'habitude de PHP, l'apprentissage est assez aisé ! Sass est désormais géré par de nombreux éditeurs de code (parfois avec un plugin pour compiler, comme avec Coda par exemple). Découvrons quelques caractéristiques de cet outil :

Include/import

Permet d'inclure un fichier, comme en PHP :

@import "knacss/_00-config";

Knacss comporte 11 fichiers Sass en plus du fichier de configuration. N'importez que ceux dont vous avez besoin.

Variables

La fonction la plus utile, surtout sur les gros projets. On peut, par exemple, définir la palette de couleur utilisée sur l'ensemble du site ou bien les couleurs des principaux réseaux sociaux, comme ci-dessous.

$color-facebook: #3B5998;
$color-twitter: #55acee;
$color-google: #db4337;
$color-pinterest: #CC2127;
$color-linkedin: #0077B5;
$color-instagram: #3F729B;
$color-youtube: #cd201f;

Mixins

Mixin permet d'introduire des bouts de code avec des variables (un peu à la manière des fonctions en PHP) :

@mixin message($bgcolor) {
	background-color: $bgcolor;
	color: #ffffff;
}
p.error { 
	@include message(red); 
}

À noter qu'il existe désormais des librairies de mixins comme Bourbon.

Extend

L'Extend permet de réutiliser des classes facilement, exemple avec "icomoon" ci-dessous, que vous pouvez définir une seule fois et réemployer à votre guise :

.font-icomoon { 
	font-family: 'icomoon';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
a.twitter:before {
	@extend .font-icomoon;
	content: "\f099";
	color: $color-twitter;
}

Voilà, c'était juste un bref aperçu, car Sass permet d'aller encore plus loin : opérateurs (plus, moins, division, etc), structures conditionnelles (@if, @else, etc), ... et/ou des combinaisons de tout cela.