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. Deux syntaxes existent. 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 Material Design Lite You'll find below a couple of examples of MDL Button elements: a Button with ripples and a FAB Button. Just copy & paste the corresponding source code in the <body> of an HTML page of your project and the elements will render as shown below. <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"> Button </button> <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored"><i class="material-icons">add</i></button> MDL elements can be tweaked and configured by adding CSS classes. There are many other elements available such as Card containers, Sliders, Tables, Menus... We also recommend that you check out our templates.
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 :
Usage | Less.js Compile .less files to .css using the command line Heads up! If the command line isn't your thing, learn more about GUIs for Less. Installing lessc for Use Globally Install with npm npm install less -g and then you will have the lessc command available globally. Installing for Node Development Alternatively if you don't use the compiler globally, you may be after npm i less --save-dev This will install the latest official version of lessc in your project folder, also adding it to the devDependencies in your project's package.json. Note that a caret version range will be automatically specified in package.json. Beta releases of lessc Periodically, as new functionality is being developed, lessc builds will be published to npm, tagged as beta. Since patch releases are non-breaking we will publish patch releases immediately and alpha/beta/candidate versions will be published as minor or major version upgrades (we endeavour since 1.4.0 to follow semantic versioning). Server-Side and Command Line Usage
The Sass Way Bootstrap 4 alpha 19 Aug 2015 Today is a special day for Bootstrap. Not only is it our fourth birthday, but after a year of development, we’re finally shipping the first alpha release of Bootstrap 4. Hell yeah! Bootstrap 4 has been a massive undertaking that touches nearly every line of code. We’re stoked to share it with you and hear your feedback. What’s new There are a ton of major changes to Bootstrap and it’s impossible to cover them all in detail here, so here are some of our favorite highlights: Moved from Less to Sass. And that barely scratches the surface of the 1,100 commits and 120,000 lines of changes in v4 so far. Ready to check it out? Development plan We need your help to make Bootstrap 4 the best it can be. The general development and release plan looks something like this: A few alpha releases while things are still in flux. For those jamming on v4 with us, we also have a dedicated v4 Slack channel. Supporting v3 One more thing… Head to the Bootstrap themes site to check them out.
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
Responsive CSS Framework Comparison: Bootstrap, Foundation, Skeleton Bootstrap 4.0.0-alpha is a fairly large update to the framework. It has dropped Less support in favor of Sass, converted from px-based to rem-based sizing, improved its grid system, and dropped IE8 support. Also, all its JS plugins were re-written in ES6, it now uses a customized reset CSS file called Reboot, and offers flexbox support via a Sass boolean variable. In addition to this update, Bootstrap now offers themes at themes.getbootstrap.com. Also, Bootstrap will continue supporting version 3, unlike the dropping of version 2 support after the release of version 3. You can read more here. Foundation 6 is a fairly major update which includes more grid flexibility, custom breakpoints, optional flexbox, and more. Like Bootstrap 4, Flexbox is now toggleable via Sass in Foundation 6. The Sass/CSS has been reworked and consolidated, and there are fewer default styles to override on common elements. Skeleton 2 was updated in December 2014 after remaining mostly unchanged for about three years.
Le blog Webnet – blog.webnet.fr via @Webnet_France | Sass et Compass Véritable référence en matière de développement web et de boîte à outils complète pour le CSS3, Sass et Compass vous permettront de créer des feuilles de styles plus facilement maintenables. Il existe deux principaux Frameworks CSS : Less dont nous vous avons déjà parlé et Compass dont nous parlerons ici. Sass est un préprocesseur CSS stable offrant de nombreuses fonctionnalités et permettant de coder vos feuilles SCSS, de les interpréter et de compiler la syntaxe. L’utilisation de ce Framework vous facilitera la création d’un site ou d’une application tout en gagnant du temps. Installation Tout d’abord, si ce n’est pas déjà fait, vous devez installer Ruby sur votre ordinateur. Veillez à cocher la case « Add Ruby Executables to your PATH ». Si Ruby est déjà installé sur votre machine, assurez-vous d’avoir la dernière version à jour. Lorsque Ruby est installé ou à jour, il faut installer Compass. Puis, installez compass: L’installation de Compass se déroule. Création d’un nouveau projet
Simplifiez-vous la vie avec LESS La partie fun du cours commence. Vous allez apprendre à utiliser LESS pas à pas. On commence ? Veuillez noter que CSS est totalement compatible avec LESS, ce qui signifie que vous pourrez tout à fait utiliser du CSS pur dans votre code si vous le souhaitez. Constantes Tout d’abord, LESS vous permet d’utiliser des constantes. un bleu électrique (#17B6FF) ;un magenta pétant (#FF17B6) ;un vert citron (#B6FF17) ;un vert acide (#1BFF17). Si vous décidez de changer une des couleurs de votre palette, vous allez devoir vous battre avec votre éditeur à coups de « rechercher / remplacer ». LESS générera le CSS suivant : On pourrait pousser un peu plus loin le concept en utilisant des noms de variables plus ciblés : Vous pouvez utiliser des variables de différents types (couleurs, dimensions, pourcentages, chaînes de caractères, etc.). Classes abstraites Les classes abstraites peuvent être comparées à des fonctions. Si vous souhaitez utiliser plusieurs paramètres, séparez-les par des virgules. Imbrication
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
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. J'aime bien cette idée de grilles à la demande plutôt qu'un framework, aussi simple soit-il. 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. Mais avant de commencer, il y a une chose que vous devez savoir sur notre amie Susy. Et ainsi de suite.