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: Values Sass supports a number of value types, most of which come straight from CSS. Every expression produces a value, variables hold values. Most value types come straight from CSS: Numbers, which may or may not have units, like 12 or 100px. Strings, which may or may not have quotes, like "Helvetica Neue" or bold. Colors, which can be referred to by their hex representation or by name, like #c6538c or blue, or returned from functions, like rgb(107, 113, 127) or hsl(210, 100%, 20%). A few more are specific to Sass: The boolean values true and false. 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
Sass: sass:color Compatibility: Dart Sass since 1.23.0 LibSass Ruby Sass Only Dart Sass currently supports loading built-in modules with @use. color.adjust($color, $red: null, $green: null, $blue: null, $hue: null, $saturation: null, $lightness: null, $whiteness: null, $blackness: null, $alpha: null)adjust-color(...) //=> color Compatibility ($whiteness and $blackness): since 1.27.0 Increases or decreases one or more properties of $color by fixed amounts. Adds the value passed for each keyword argument to the corresponding property of the color, and returns the adjusted color. All optional arguments must be numbers. See also: color.scale() for fluidly scaling a color’s properties. color.change() for setting a color’s properties. SCSS Syntax @debug color.adjust(#6b717f, $red: 15); // #7a717f @debug color.adjust(#d2e1dd, $red: -10, $blue: 10); // #c8e1e7 @debug color.adjust(#998099, $lightness: -30%, $alpha: -0.4); // rgba(71, 57, 71, 0.6) Sass Syntax adjust-hue($color, $degrees) //=> color Makes $color darker.
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.
Sass: sass:color Compatibility: Dart Sass since 1.23.0 LibSass Ruby Sass Only Dart Sass currently supports loading built-in modules with @use. color.adjust($color, $red: null, $green: null, $blue: null, $hue: null, $saturation: null, $lightness: null, $whiteness: null, $blackness: null, $alpha: null)adjust-color(...) //=> color Compatibility ($whiteness and $blackness): since 1.27.0 Increases or decreases one or more properties of $color by fixed amounts. Adds the value passed for each keyword argument to the corresponding property of the color, and returns the adjusted color. All optional arguments must be numbers. See also: color.scale() for fluidly scaling a color’s properties. color.change() for setting a color’s properties. SCSS Syntax @debug color.adjust(#6b717f, $red: 15); // #7a717f @debug color.adjust(#d2e1dd, $red: -10, $blue: 10); // #c8e1e7 @debug color.adjust(#998099, $lightness: -30%, $alpha: -0.4); // rgba(71, 57, 71, 0.6) Sass Syntax adjust-hue($color, $degrees) //=> color Makes $color darker.
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.
Sass: Built-In Modules rgb($red $green $blue)rgb($red $green $blue / $alpha)rgb($red, $green, $blue, $alpha: 1)rgb($color, $alpha)rgba($red $green $blue)rgba($red $green $blue / $alpha)rgba($red, $green, $blue, $alpha: 1)rgba($color, $alpha) //=> color Compatibility (Level 4 Syntax): Dart Sass since 1.15.0 LibSass Ruby Sass LibSass and Ruby Sass only support the following signatures: rgb($red, $green, $blue) rgba($red, $green, $blue, $alpha) rgba($color, $alpha) Note that for these implementations, the $alpha argument is required if the function name rgba() is used, and forbidden if the function name rgb() is used. Compatibility (Percent Alpha): since 3.7.0 LibSass and older versions of Ruby Sass don’t support alpha values specified as percentages. If $red, $green, $blue, and optionally $alpha are passed, returns a color with the given red, green, blue, and alpha channels. Each channel can be specified as either a unitless number between 0 and 255 (inclusive), or a percentage between 0% and 100% (inclusive). 💡 Fun fact: