Last month’s article was devoted to configuring grunt and node.js to allow for compiling of SASS. However, very little time was spent actually discussing SASS. This article should hopefully remedy that, as SASS can be extremely useful for any web programmer. What is SASS? SASS stands for Syntactically Awesome Style-Sheets, and is a pre-processor for CSS. It essentially adds features to CSS (such as nesting, functions, mixins, imports, custom units, mathematics, inheritance, and variables).

L'article du mois dernier a été consacré à la configuration de grunt et node.js pour permettre la compilation de SASS. Cependant, nous n'avons pas vraiment parlé de SASS. Cet article devrait je l'espère y remédier, car SASS peut être extrêmement utile à tout programmeur web.

Qu'est-ce que SASS?

SASS signifie « Syntactically Awesome Style Sheets » [Ndt : feuilles de style syntaxiquement impressionnantes], et c'est un pré-processeur pour CSS. Il ajoute des fonctionnalités à CSS (comme l'imbrication, les fonctions, les « mixins », les importations, les unités de mesure personnalisées, les mathématiques, l'héritage et variables).

Nesting Imagine you have a two types of links on your website - a “default” style that should be blue and underlined (the standard values), but then you have links in your menu that you want to remove the decorations from, and adjust the :hover settings to darken the color of the button. In normal CSS, it could look something like this: ul.menu li a { text-decoration: none; } ul.menu li a:hover { background-color: #000000; } In SASS, however, you can do the following: $bg-color: #0000FF; ul.menu { li { a{ text-decoration: none; &:hover { background-color: darken($bg-color, 15%);}}}}

Imbrication

Imaginez que vous avez deux types de liens sur votre site web - un style « par défaut » qui devrait être bleu et souligné (les valeurs standard), mais vous avez aussi des liens dans votre menu pour lesquels vous souhaitez supprimer les décorations, et ajuster le paramètre :hover pour assombrir la couleur du bouton. En CSS normal, cela pourrait ressembler à ceci :

ul.menu li a { text-decoration: none; }

ul.menu li a:hover { background-color: #000000; }

Avec SASS, vous pouvez faire ce qui suit :

$bg-color: #0000FF;

ul.menu { li { a{ text-decoration: none; &:hover { background-color: darken($bg-color, 15%);}}}}

It looks a little less legible when written in a single line. However, format it nicely, and it looks something like that shown top right. A few other things I’m doing in this example: • Defining a variable (i.e. the company color, or a primary color in a template). This variable can be used anywhere in the SASS file. This way, any change to the color scheme requires only a single edit. • Using a SASS function called darken, which calculates the value for a darker version of the supplied color. SASS offers many functions, such as the ability to create color values based on hue, saturation and lightness (hsl). • &:hover - the ampersand essentially places the following text directly behind the parent when nesting. For example ul { .menu{}} would result in ul .menu in normal CSS (in other words, find an element with the class menu after a ul element), and ul { &.menu{}} would result in ul.menu. The second one means “find a ul element with class menu”. Ergo, this example means “find each tag in the menu unordered list, and darken the color when the user hovers over it”.

Cela semble un peu moins lisible quand on l'écrit sur une seule ligne. Cependant, en le formatant correctement, cela ressemble à ce qui est en haut à droite.

Quelques autres choses que je fais dans cet exemple : • Définir une variable (c'est-à-dire la couleur de l'entreprise, ou une couleur primaire dans un modèle). Cette variable peut être utilisée n'importe où dans le fichier SASS. Ainsi, toute modification de la palette de couleurs ne nécessite qu'un seul changement. • Utiliser une fonction SASS appelée darken, qui calcule la valeur pour une version plus sombre de la couleur fournie. SASS propose de nombreuses fonctions, offrant la possibilité de créer des valeurs de couleur en fonction de la teinte, la saturation et la luminosité (HSL). • &:hover - l'esperluette sert essentiellement à mettre le texte suivant directement derrière le parent lors de l'imbrication. Par exemple ul { .menu{}} donnera ul .menu en CSS normal (autrement dit, trouver un élément de la classe menu après un élément ul), et ul { &.menu{}} donnera ul.menu. Ce dernier signifie « trouver un élément ul de la classe menu ». Donc, cet exemple signifie « trouver chaque balise dans la liste non ordonnée menu, et assombrir la couleur lorsque l'utilisateur la survole ».

Mixins Mixins are essentially macros, or functions, that do no calculation, but instead turn one line of SASS into multiple lines of CSS. A prime example is using CSS gradients. As this is a feature implemented differently by nearly every browser, it requires many lines of code to ensure the gradient appears in every browser that supports it. A SASS mixin I use for this purpose, looks like the example on the next page, at the top. Now, this does look a bit like gibberish. However, the second background: line can safely be ignored if you don’t want to use an SVG colored background in IE9. Everything else is commented to indicate which version of the browser it supports, and the colors supplied in the parameters of the mixin ensure that every gradient looks the same. This is the defined mixin - as such, you need to type it only once. I typically put variables, functions and mixins at the top of the SASS file, but it doesn’t really matter.

To actually use the gradient mixin (to create a CSS gradient), you simply need to type: @include gradient($color1,$color2); Example: @include gradient(#367864,#537a7c); Results in the CSS shown right. Functions Functions work much the same way as mixins. Define your function with: @function name($param1, $param2) { @return $result; } And to use it in your SASS: name($param1, $param2);

Mathematics SASS also adds options to use mathematical operators (such as *, +, /, -). You must always define units to your numbers, or else use a function to ensure that SASS knows what the unit should be. Otherwise it will result in invalid CSS (i.e. width: 150, instead of width: 150px). Inheritance This allows you to extend CSS defined elsewhere in your file. If, for example, you have warning messages and each one is intended to have a different color font, but otherwise remain the same, you can define it like this: .message { border: 1px solid #ccc; padding: 10px; color: #333; } .error { @extend .message; color: red; }

Importing Lastly, SASS also allows you to create separate files, and import them into a main file. Something like this: _mobile.scss - for screen sizes smaller than 720px _desktop.scss - for larger screens _mixins.scss - to contain all your mixins _variables.scss - to contain your variables app.scss - the main file, that only contains imports for each of the other files listed.

If anyone is looking for a SASS-enabled framework with various useful features (i.e. a grid, accordion, carousel, etc.), I have used the Zurb Foundation framework a few times. Otherwise, if you prefer to use your own CSS code, it might be time to convert it to SASS, to make further edits a little less time-consuming. And using the C&C articles from Issues 84-87, you can create a git repository with a configured grunt system to house your new SASS framework. If anyone has any issues, questions, corrections, or requests, you are always welcome to send me a quick email at lswest34+fcm@gmail.com. Further Reading: http://sass-lang.com/guide - The official SASS guide. It covers some examples, and also houses the manuals (under Documentation). @