background preloader

LESS VS SASS

Facebook Twitter

SASS

Preboot. 25 Essential Sass and Compass Tools. CSS' simplicity is one of its defining features, and a big reason for its popularity. However, as websites and applications become more complex, the size and complexity of stylesheets also increase. CSS can quickly become verbose and repetitive. But a preprocessor like Sass expands the capabilities of CSS by allowing you to use variables to store values, create mixins for common snippets, nest declarations and help improve the maintainability of the entire project. Created in 2006, Sass has two syntaxes: the original (also called the "indented syntax") and SCSS, or "Sassy CSS," the more popular of the two, as it makes converting an existing website to Sass simple (by changing the file extension from .css to .scss).

It doesn't depend on indentation — it's written just like CSS, making it easier to adopt. Compass is the companion open-source CSS authoring framework for Sass. There are a variety of tutorials, guides, podcasts, videos, presentations and even books on Sass. 1. 2. 3. 4. 5. 6. Les idées reçues sur les préprocesseurs CSS (Sass, Less...) Damian Le Nouaille est développeur Freelance (Frontend et Ruby). Actuellement, il travaille sur Mayathebuzz et essaie d’utiliser les meilleures pratiques frontend pour rendre son métier plus agréable. Il propose également une formation Sass et Compass pour Human Coders Formations. Vous pouvez le suivre sur Twitter (@damln) et en savoir plus sur son site Avant tout, qu’est-ce qu’un préprocesseur CSS ? C’est un outil permettant de transformer un langage (avec une syntaxe semblable à CSS), en CSS valide.

La syntaxe du langage est souvent tellement proche de celle du CSS qu’on voit à peine la différence. “Ils complexifient CSS.” Ajouter des “mots clés” comme @include border-radius(5px); et autres fonctions de Sass n’est pas une destructuration de CSS, ni une complexification, c’est simplement un niveau d’abstraction qui vous permet de vous décharger de responsabilités inutiles à ce stade de votre code. “Ils n’ajoutent pas de fonctionnalités CSS aux CSS.” Pur CSS RGBA: Less / Sass ou comment rendre maintenable son CSS ? Malgré sa syntaxe simple, cela peut paraître difficile d’organiser du CSS.

De plus les navigateurs n’arrangent pas les choses en créant des propriétés qui leurs sont propres. Rassurez-vous, il existe des solutions ! Le seul inconvénient, c’est qu’une fois essayées, on ne peut plus s’en passer… Pour répondre aux limites du CSS, des surcouches ont été créées pour donner de nouvelles possibilités dans l’écritures des feuilles de styles. Les plus utilisées aujourd’hui sont SASS (Syntactically Awesome StyleSheets) et LESS Tous les deux sont des languages compilés qui permettent de générer des feuilles de styles .css classiques et lisibles par tous les navigateurs. SASS propose deux formats de fichier : le .sass et le .scss avec une deux différences : pour écrire en .sass, il n’y a ni accolade, ni point-virgule.

[tagline]Leurs objectifs communs[/tagline] [tagline]Leurs apports[/tagline] Structuration La première amélioration est l’imbrication des sélecteurs. Variabilisation Qui dit variable dit … Tableau récapitulatif des points forts et des points faibles des deux préprocesseurs. Le blog Webnet – blog.webnet.fr via @Webnet_France | LESS versus SASS. Nous vous proposons aujourd’hui un comparatif entre deux préprocesseurs dont nous avons déjà parlé : LESS et SASS (combiné à Compass). Pour rappel, un préprocesseur CSS est un outil qui permet de transformer un langage particulier en CSS valide. Ces préprocesseurs CSS vous permettent de créer des feuilles de styles plus maintenables. Quelque soit le préprocesseur choisi, la syntaxe du langage est relativement proche de celle de la CSS. Pourquoi l’utilisation d’un préprocesseur est-il conseillé ? Au fil du temps, la confection d’un code CSS se complexifie du fait de l’augmentation du nombre de règles, du nombre de fichiers, des effets CSS3, du debug cross-browser, etc… Ces différents facteurs ont un impact direct sur la maintenabilité de vos CSS.

Grâce à l’utilisation d’un préprocesseur, vous pourrez éviter les répétitions de valeurs (codes couleurs, dimensions…), regrouper des propriétés des règles CSS et organiser au mieux votre intégration. Installation Extensions Langages Mixins. Less vs Sass? It’s time to swtich to Sass. The CSS pre-processor debate The Sass vs. LESS argument has been done to death. In this series I’ll talk about why Sass really is the best, why you should start using Sass if you haven’t already, how to get started using Sass and Problems with pre-processors, alternatives to Sass and CSS4.

Before I begin my highly opinionated tirade, let me just mention that I learned Less first. Less is great for beginners, it’s really easy and quick to set it up. …until I discovered the truly awesome power of Sass and Compass. Why Sass is better than LESS Sass lets you write re-usable methods and use logic statements; ie. conditionals and loops. Problems with Less Less aims to be as much like CSS in style, syntax and structure, and while this is a nice thought for easing users into writing it, there are a few issues which make it a lot less fun to work with than Sass: Logic statements In Less you can write a basic logic statement using a ‘guarded mixin’: The equivalent in Sass using if statements: Loops.