Avec la plupart — si ce n'est tous — les préprocesseurs, nous avons l'option d'écrire des commentaires qui ne seront pas compilés dans le fichier CSS de sortie. Comme règle, utilisez ces commentaires pour commenter du code qui ne sortira pas du fichier SCSS. Si vous documentez du code qui sera compilé, utilisez des commentaires qui seront aussi compilé. Par exemple ceci est correct :
// Dimensions of the @2x image sprite:
$sprite-width: 920px;
$sprite-height: 212px;
/**
* 1. Default icon size is 16px.
* 2. Squash down the retina sprite to display at the correct size.
*/
.sprite {
width: 16px; /* [1] */
height: 16px; /* [1] */
background-image: url(/img/sprites/main.png);
background-size: ($sprite-width / 2 ) ($sprite-height / 2); /* [2] */
}
Nous avons des variables documentées — du code qui n'apparaitra pas dans le CSS compilé — avec des commentaires préprocesseur, tandis que notre CSS — du code qui sera compilé dans notre CSS final — est documenté avec des commentaires CSS. Cela signifie que nous n'aurons que les informations correctes et pertinentes disponibles lorsque nous debuggerons nos feuilles de style compilées.