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. Most cover things that often repetitive in CSS. From adapting across multiple browsers to creating buttons, animations and transition effects, find this and more in the following 11 mixin libraries you should get for your Sass 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. 3. 4. FireCompass for Firebug. 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. Stylus — expressive, robust, feature-rich CSS preprocessor. Closure-stylesheets - Closure Stylesheets. Closure Stylesheets is an extension to CSS that adds variables, functions, conditionals, and mixins to standard CSS. The tool also supports minification, linting, RTL flipping, and CSS class renaming. Get Closure Stylesheets! Closure Stylesheets is available as a Java jar named closure-stylesheets.jar.
You can either download a precompiled jar or build it from source. Using Closure Stylesheets requires Java. Java -jar closure-stylesheets.jar --help CSS Extensions Internally at Google, Closure Stylesheets are frequently referred to as "Google Stylesheets" or "GSS," so you will see references to GSS in the source code. Variables Variables can be defined in Closure Stylesheets using @def followed by a variable name and then a value. @def BG_COLOR rgb(235, 239, 249); @def DIALOG_BORDER_COLOR rgb(107, 144, 218);@def DIALOG_BG_COLOR BG_COLOR; Running java -jar closure-stylesheets.jar --pretty-print variable-example.gss will print: Functions add() sub() mult() divide() min() max() Mixins Conditionals.
Sass: Syntactically Awesome Style Sheets. Getting started | Less.js. CSS3 Please! The Cross-Browser CSS3 Rule Generator.