background preloader

Bourbon - A Lightweight Sass Tool Set

Bourbon - A Lightweight Sass Tool Set
Related:  SASS

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. 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). C’est pourquoi Sass 3.0 a introduit une nouvelle syntaxe, plus proche de CSS, appelée SCSS (“Sassy CSS” qu’on pourrait traduire par “CSS à la Sass” ou bien "CSS classieux"). On commence ! Ne vous répétez pas Variables

11 Mixin Libraries For Sass Designers Should Get If you use Sass in your development workflow, you know the importance of mixins. When you see some things that are written repeatedly and tediously in CSS, that’s where mixins can help you prevent repetitive work. A mixin contains CSS declarations that you can reuse throughout your site. Pin it There are many mixins are made by developers, to help you when working with Sass in your development. Recommended Reading: A Simple And Easy Guide To Understand Sass 1. Bourbon is a Sass library that contains mixin, functions, and addons that let you simplify the creation of stylesheets for cross-browser use. Check out the complete documentation to use each available mixin and function. 2. Sass CSS3 Mixins provide mixins that works across different browsers. Download this mixin here. 3. Want to filter your image with stunning effect in Sass? 4. CssOwl provides useful mixins to set the position of an element (relative or absolute) and add content with the pseudo selector ( :after and :before). 5. 6.

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. 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 Digging Into Sass - A Guide A while ago Thoriq Firdaus wrote a great article about getting started with Sass which showed you how to install and use this highly useful CSS preprocessor language (you might want to check it out, you know, to get started). In this article I thought I’d give you a bit more insight into what you can do with Sass and how developers use it every day to create better and more modular CSS code. Skip ahead to the section you want: Recommended Reading: Using Bootstrap 3 With Sass Tools Of The Trade Thoriq showed you how you can use Sass from the command line using the sass --watch command. If you prefer GUI tools, you can go with my personal favourite app, Codekit, a web developer tool for compiling Sass, concatenating, autoprefixing and much more. If you just want to try out Sass without paying for anything you can use the terminal, or Koala (here’s our review), a free cross-platform feature-rich app, which can hold its ground against premium counterparts. Variables Nesting Extending Rulesets

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 ! Sass fait partie d’une lignée de préprocesseur css qui sont la pour booster votre workflow. 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. Le Nesting : La variable : La mixin :

sur le site Kaelig.fr > Sass Reference Syntax There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS3. This means that every valid CSS3 stylesheet is a valid SCSS file with the same meaning. In addition, SCSS understands most CSS hacks and vendor-specific syntax, such as IE’s old filter syntax. The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. Either syntax can import files written in the other. $ sass-convert style.sass style.scss $ sass-convert style.scss style.sass Note that this command does not generate CSS files. Using Sass Sass can be used in three ways: as a command-line tool, as a standalone Ruby module, and as a plugin for any Rack-enabled framework, including Ruby on Rails and Merb. gem install sass If you’re using Windows, you may need to install Ruby first. To run Sass from the command line, just use sass input.scss output.css gem "sass" :style

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. 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. Source maps require Sass 3.3 or above (Sass 3.4 was released recently). What is a Source Map? How Do Source Maps Help? sass style.scss:..

Prepros est le compagnon de vos projets SASS - Seemios Blog Prepros est un petit logiciel qui va vous faciliter la vie, surtout si vous ne supportez pas la ligne de commandes. Il permet de compiler vos fichiers SCSS ou SASS très simplement. Plus besoin d’installer Ruby et d’ouvrir votre invite de commande sur Windows. Prepros est capable de compiler de nombreux langages tels que Less, Coffeescript, Markdown ou encore Haml. L’installation est très simple puisqu’il suffit de télécharger le programme d’installation sur le site officiel et de l’exécuter. Au lancement de Prepros, une fenêtre épurée vous permet d’accéder aux différents paramètres de l’application et de créer un nouveau projet. En bas à gauche de l’écran, le bouton « + » vous permet d’ajouter un projet dans Prepros. automatiquement ajouté au projet. En cliquant sur le bouton « Engrenage » (en haut à droite), vous accédez à l’écran de configuration de Prepros. L’option « Output style » permet d’indiquer le format de génération des CSS.

Related: