background preloader

The Sass Way

The Sass Way
Related:  SASS

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. 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. Source maps require Sass 3.3 or above (Sass 3.4 was released recently). Conclusion

File: README — Sass Documentation Sass makes CSS fun again. Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. Sass has two syntaxes. The second, older syntax is known as the indented syntax (or just "Sass"). Using Sass can be used from the command line or as part of a web framework. gem install sass After you convert some CSS to Sass, you can run sass style.scss to compile it back to CSS. sass --help To install Sass in Rails 2, just add config.gem "sass" to config/environment.rb. Sass can also be used with any Rack-enabled web framework. require 'sass/plugin/rack'use Sass::Plugin::Rack to config.ru. To use Sass programmatically, check out the YARD documentation. Formatting Sass is an extension of CSS that adds power and elegance to the basic language. Sass has two syntaxes. Nesting Sass avoids repetition by nesting selectors within one another. Variables Mixins Executables sass

Sass Un article de Wikipédia, l'encyclopédie libre. Sass (Syntactically Awesome Stylesheets) est un langage de génération dynamique de feuilles de style initialement développé par Hampton Catlin et Nathalie Weizenbaum. Sass est un métalangage de feuilles de style en cascade (CSS). C'est un langage de script qui est interprété en CSS. SassScript est le langage de script lui-même. Sass peut être étoffé avec Compass (pratique pour les préfixes des différents navigateurs). Articles connexes[modifier | modifier le code] Liens externes[modifier | modifier le code] Site officiel Getting started | Less.js Bourbon - A Lightweight Sass Tool Set Compass Home | Compass Documentation 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. Par David Demaree La simplicité de CSS est depuis toujours l’une de ses caractéristiques les plus agréables. Les feuilles de style CSS ne sont au fond que de longues listes de règles, chacune consistant en un sélecteur et quelques styles à appliquer. Il y a eu des propositions pour améliorer CSS – l’ajout de constantes ou de variables par exemple – mais aucune n’a été mise en oeuvre par les principaux navigateurs. Heureusement, il y a quelques années les développeurs Hampton Catlin et Nathan Weizenbaum ont proposé une meilleure façon de gérer des feuilles de style complexes. La nouvelle syntaxe de feuilles de style s’appelle Sass, pour “syntactically awesome style sheets” (feuilles de styles syntactiquement super). On commence ! NdT : Ruby était notoirement lent. Ne vous répétez pas Mixins

Sass Color Variables That Don’t Suck One of the best reasons to use Sass is variables. They help keep your code DRY, which makes it easy to maintain and change. However, with colors, it’s easy for your variables to get out of hand. In this article, I’ll show you an quick, easy method to wrangle your color variables. The Problem Let’s say you have the following CSS: If you decide to use a different color than #b0eb00, you have to change it in multiple places. Now, it’s easy to change the value of $yellow-green everywhere. As you accumulate color variables, you may decide to stick them in in their own file. $yellow-green: #b0eb00; $gray: #595959; $dark-gray: #363636; $light-gray: #a6a6a6; Over time, this file grows until you end up with a mess. Every time you add a new color, it becomes more difficult to find a name for it. A Bad Solution That Does Not Work You’ve felt the pain of your color variables and decided to refactor. At least now it’s obvious what the variables are by looking at them. Another Solution That Doesn’t Work

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. 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

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). 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. In this post I've purposely not included details on everything that Sass can do because I don't believe they are useful. Installation To install Sass you need to have Ruby installed. For Mac users, you already have it! For Window users there are quite a few installers available, but according to some: http:/rubyinstaller.org is recommended. Once Ruby is installed, you'll need to open your command line interface of choice (I'm on a Mac, so for me this is the Terminal app). How to run sass --style extended --watch Assets/Styles/Sass/:Assets/Styles/ Extend

Découvrir Susy Susy vous permet de créer vos layouts à partir de grilles. Fonctionnant avec Sass, Susy est incroyablement flexible et devrait répondre à tous vos besoins. Introduction claire par Zell Liew Par Zell Liew Introduction de Chris Coyier : Je me suis rallié dernièrement à l'idée d'utiliser Susy pour construire des grilles avec Sass. Susy est un outil qui vous permet de construire vos mises en page à partir de grilles. Pourquoi choisir Susy parmi les millions de frameworks disponibles sur le net ? Susy est l'une des meilleures choses qui me soient arrivées ces derniers mois, elle m'aide tellement que j'ai décidé d'écrire un livre sur elle, pour faire connaître ses mérites au monde. Dans ce petit article, je vais essayer de vous montrer pourquoi Susy est si spéciale et comment elle peut vous aider. Nous allons commencer très simplement et passer ensuite à des choses plus élaborées lorsque vous connaîtrez mieux Susy. NdT : Pour installer Susy vous pouvez utiliser la console : gem install susy.

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 ! 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 ! » . Petit tour d’horizon créer sa petite grille. Sass ça s’installe ? Et bien oui ! un terminal ou consoleun peu de patienceet beaucoup de café ;) Tout d’abord, Sass a été écrit nativement en Ruby. Mac : Sudo gem install sass Ps : Je vous rappelle qu’il n’a pas besoin d’installer Ruby, c’est natif sous Mac. Pour Windows, Je vous conseille vivement ce tuto par la communauté franchophone Ruby car oui Windows aime quand c’est compliqué :p Cependant la compilation étant lente avec Ruby, un projet a vu le jour : LibSass. Pour ma part, J’utilise Sass avec un task runner nommé Gulp pour conserver cette rapidité ;) J’y reviendrai dans un prochain billet. L’essentiel DRY “Write Less, do more” prend tout son sens ici. Partials SCSS

Sass & Compass, mes compagnions de route - nicecoder Utilisant depuis Aout 2015, Sass & Compass. Je voulais tout simplement vous faire tout d’abord un petit tuto pour le débutant et ainsi livrer mon avis. Voici un tour d’horizon sur cette technologie :) Commençons les amis, Commençons ! Sass c’est quoi ? Désolé mais je vais devoir faire un peu d’histoire mais c’est important ! Rassurez vous, d’autres préprocesseurs css existent tels que Stylus , ou encore Less mais vous allez vite vous rendre compte de la puissance de Sass ! Sass ou Less, permettent de réécrire en simplifiant votre feuille de style en pouvant les morceler en “partials”. Sass, ca marche comment ? Allez on ne s’inquiète pas . Ce n’est pas fini ! Pour Windows, Il vous faut simplement installer ce dernier avec le package RubyInstaller et ensuite allez y c’est partit! Pour Mac, Vous n’avez rien a faire car l’interprêteur Ruby est déjà installé sous Mac. Sass, une feuille de style qui a du style ! Ca a du style parce que cela rend simple vos développements web ! Le Nesting :

Related: