background preloader

SASS

Facebook Twitter

Release the docs! Learn Sass In 15 Minutes. Danny Markov If you write copious amounts of CSS, a pre-processor can greatly decrease your stress levels and save you a lot of precious time.

Learn Sass In 15 Minutes

Using tools such as Sass, Less, Stylus or PostCSS makes large and complicated stylesheets clearer to understand and easier to maintain. Thanks to features like variables, functions and mixins the code becomes more organized, allowing developers to work quicker and make less mistakes. We’ve worked with pre-processors before as you may remember from our article about Less. This time we are going to explain Sass and show you some of it’s main features. 1. Sass files cannot be interpreted by the browser, so they need compiling to standard CSS before they are ready to hit the web. The simplest solution is a browser tool for writing and compiling Sass right on the spot – SassMeister.Use a 3rd party desktop app. Here is how you can compile .scss files using the node CLI: Les préprocesseurs CSS, c’est senSass ! Un préprocesseur CSS est un outil (ou programme) permettant de générer dynamiquement des fichiers CSS.

Les préprocesseurs CSS, c’est senSass !

L’objectif est d’améliorer l’écriture de ces fichiers, en apportant plus de flexibilité au développeur web (source : Wikipedia). Les préprocesseurs CSS les plus couramment employés sont aujourd’hui Sass, LESS (dont nous avons déjà parlé), PostCSS et Stylus. Dans le cadre de cet article, j’ai fait le choix de ne couvrir que le préprocesseur “Sass”, largement majoritaire parmi les développeurs web en ce moment. En effet, de très grands sites web, dont ceux d'Apple, BBC, Yelp, Twitter, The Guardian, Salesforce, 6play, RTL, Fun Radio, Behance pour n'en citer qu'une poignée, sont intégrés via Sass. Quel que soit votre choix, la différence entre les préprocesseurs sera généralement assez minime. The Sass Playground!

La grille vue et corrigée par Sass - agence AntheDesign. Aujourd’hui je vais aborder un outil de développement web qui a selon moi révolutionné la façon de réécriture sa feuille de style CSS !

La grille vue et corrigée par Sass - agence AntheDesign

J’ai demandé Sass. Ce qui est bien avec Sass, c’est que vous pouvez en quelques sortes, sortir du carcan : « Allez bon j’utilise Bootstrap ! » . Découvrir Susy. Susy vous permet de créer vos layouts à partir de grilles.

Découvrir Susy

Fonctionnant avec Sass, Susy est incroyablement flexible et devrait répondre à tous vos besoins. Guide to using Sass. Introduction I agree that 'pre-processors' such as LESS, Sass, Compass etc are normally a bad idea because generally they are used badly by developers/designers who could do better without them (see: Object-Oriented CSS).

Guide to using Sass

That being said, there are some areas where pre-processors can really help out, such as being able to use @import without worrying about the browser loading the stylesheet synchronously and thus making the page slower to load. Or being able to create a variable to hold your client's branding colours for easy re-use. Getting Started with Sass and Breakpoint Mixin. My colleague Chris was one of those people until recently and is currently finding the delight that comes with scss over css.

Getting Started with Sass and Breakpoint Mixin

My one tip for him when he got started was to break up his Sass files into modules by creating _module.scss files, and to use a breakpoint mixin to write the media query changes to the module inline with the rest of the rules. Chris is now much happier with life, so let's take a look at what I'm talking about in more detail. Structuring your Sass When I first started working with Sass I set my project up in the same way that I would usually approach my standard CSS file. NormaliseTypographicalLayoutGeneral@media query overrides This converted to my .scss file to look like this The issue with this approach was that while I was working on the header of the iste I was styling the logo, navigation, breadcrumbs, search. Nearly half way through I realised there was an easier approach to this problem.

Here's how it works. Create .scss files for each module. LiveStyle Analyzer. Using Source Maps to Debug Sass in Chrome. If you use Sass in your front-end projects, chances are your partials are split in a clean and logical fashion based on a reliable Sass architecture.

Using Source Maps to Debug Sass in Chrome

In such cases, debugging the compiled CSS could be both troublesome and time consuming. Sass provides a flag to enable line numbers (--line-numbers), which includes comments (like below) in your CSS. Although this is helpful, you would still have to trace the bug in your CSS back to the source file manually. And editing the CSS in the browser using the developer tools cannot be persisted, since it will get overwritten by the next Sass compile.

So how can we make this process easier? I’m going to show you how to use source maps in conjunction with Chrome’s Workspaces to allow you to debug and edit Sass from within the browser. Browser and Sass Requirements The source maps feature gained a lot of attention when it was first introduced and a lot has changed since. You do not require Chrome Canary, nor do you need to edit to use this. The Sass Way. Scout - Compass and Sass without all the hassle. Sass Mixin for Generating Color Palettes. What is this?

Sass Mixin for Generating Color Palettes

Sick of putting together a whole bunch of variables to build or prototype something? I am. So I made a color palette generator in Sass. You can use it too, if you'd like. It's pretty simple, just include the mixin, pass in your color and which type of palette you'd like to create, and voila! The mixin will generate the colors by not only adjusting the hues according to the type, but it will mix the original color back in at 15% in order to create a consistent color palette.

With each color comes shades of that color. Check out the repo on Github. Here are the different types of palettes, and at the bottom you'll see that you can include them all. For the example $color, we'll use Sun Flower from Flat UI Colors. Complement @include pallet-town($color, complement); Le blog Webnet – blog.webnet.fr via @Webnet_France. CSS maintenables avec Sass & Compass.

Bourbon - A Lightweight Sass Tool Set. Object Oriented CSS (OOCSS) with Sass. The concept of Object Oriented CSS was conceived by Nicole Sullivan and has since become one of the most widely adopted methodology of writing neat and manageable CSS.

Object Oriented CSS (OOCSS) with Sass

The objective of this methodology is to make CSS as reusable as possible by making it modular and generic. The mantra is Don’t Repeat Yourself (DRY). “Object Oriented” CSS The term “object oriented” is rooted in software engineering where it means organising code around ‘objects’ rather than procedural actions, and data rather than procedural logic. The term is applied to CSS not in the strictest engineering sense, but almost as a metaphor. In OOCSS, a CSS object is a repeating visual pattern, i.e. a pattern that would produce the same results visually regardless of where it is placed. Sass & Compass, mes compagnions de route - nicecoder. Utilisant depuis Aout 2015, Sass & Compass.

Sass & Compass, mes compagnions de route - nicecoder

Je voulais tout simplement vous faire tout d’abord un petit tuto pour le débutant et ainsi livrer mon avis. Se lancer dans Sass. Qui a encore peur aujourd'hui de Sass et des préprocesseurs en général ? David Demaree nous montre dans cette introduction claire et complète la simplicité et l'utilité de Sass. Indispensable, vraiment. Sass. Un article de Wikipédia, l'encyclopédie libre.