- 1. The Sass Way
- 2. Compass.app
- 3. Scout
- 4. Compass Recipes
- 5. Bourbon
- 6. Bourbon Neat
- 7. Susy
- 8. Codekit
- 9. Sassy Buttons
- 10. LiveReload
- 11. Hammer
- 12. Forge
- 13. Normalize.css (with Sass or Compass)
- 14. Sass for WordPress
- 15. Sassaparilla
- 16. Sass Modular Scale
- 17. MVCSS
- 18. Bootstrap Sass
- 19. Prepros
- 20. Assembling Sass
- 21. Sass Style Guide
- 22. FireSass (for Firebug)
- 23. Zocial
- 24. Breakpoint
- 25. Grails Sass/Scss Plugin
1. The Sass Way
Scout is a cross-platform app that runs Sass and Compass in a self-contained Ruby environment, letting you manage your projects effortlessly. There's no need to deal with setting up Ruby or learning command line. Scout does all the "heavy lifting" and aims to help improve yourworkflow by giving you more control, organization and optimization.
一个提供大量使用Compass和Sass写的CSS，它包括丰富的backgrounds, effects, icon fonts, forms, layouts, media queries等。它架设在 上，可以复制使用。
6. Bourbon Neat
Neat is a semantic grid framework built on top of Sass and Bourbon. It's simple yet powerful enough to handle any responsive layout. It promotes clean, semantic markup, relying entirely on Sass mixins, and does not pollute your with presentation classes and extra wrapping divs.
Susy provides responsive grids for Compass, filling the void left when grids were stripped from Compass. You can quickly add media-query breakpoints for new layouts, or create your own math using Susy's array of grid helpers. It has the power to help you build a site in minutes, or create a scalable grid library for use in large projects.
Codekit is a powerful compiler that processes Sass, Compass, Less, Stylus, Jade, Haml, Slim, CoffeeScript andfiles automatically each time you save. With live browser reloads, image optimization and easy debugging, it makes working with Compass and Sass a breeze. The app also offers team collaboration and helps reduce load times by combining and minifying files.
Sassy Buttons is a compass extension that helps you create customizable, attractivebuttons that are cross-browser compatible, using only a few lines of Sass. The extension gives you a set of mixins and defaults to create your custom buttons. The provided defaults can be customized, with five different gradients and three text styles to choose from.
LiveReload resides in your menu bar and monitors changes in the file system. As soon as you save a file, it is preprocessed as required, and the browser is refreshed. It ships with SASS, Compass, LESS, Stylus, CoffeeScript, IcedCoffeeScript, Eco, SLIM, HAML and Jade, and is controlled by two main checkboxes, so you won't get lost.
Forge is a free command-line toolkit for bootstrapping and developing WordPress themes in a tidy environment, using front-end languages like Sass, Less and CoffeeScript. It creates a source folder with base template files, SCSS files and theme options, then automatically compiles to your local WordPress install(s) as you save changes. When you are ready to distribute your theme, Forge will build it to a folder of your choice or bundle the theme into an easily installed zip package.
Normalize.css is a popular -ready alternative to CSS resets. It makes browsers render all elements more consistently and in line with modern standards, precisely targeting only the styles that need normalizing. This is the Sass/Compass port of that file, which utilizes legacy IE support variables, a CSS3 box sizing mixin and vertical rhythm mixins.
Sass for WordPress is a plugin that enables the use of Sass in WordPress projects, with support for both Sass and SCSS syntax. It watches for changes to your Sass files and re-compiles your CSS when needed. We recommend you run the plugin locally when developing your theme(s) and upload the compiled CSS along with the reset of your theme, if you can’t or don’t want to install the Sass and Compass gems on your hosting environment.
Sassaparilla is a fast way to start your responsive web design projects, harnessing the power of Sass and Compass. Its core focus is on better, beautiful typography with the correct vertical rhythm. It allows you to work in pixels, then compiles in Ems, and works with CSS variables, keeping them all in one place for safe keeping. Setup is simple, with extensive documentation, available on GitHub to fork.
Sassy Modular Scale is a Sass-based mixin that calculates the incremental values of the modular scale in proportion to a set size and ratio. It was inspired by and adapted from Tim Brown's Modular Scale, and can be used as a Compass Extension or installed as a Ruby gem. Included are functions for a number of classic design and musical scale ratios, with the ability to add your own ratios, as well.
MVCSS is a Sass-based CSS architecture for creating predictable and maintainable application style, broken down into three primary sections: application, core and modules. The architecture and accompanying Styleguide and Library mesh preferred practices and other well-documented methods, such as OOCSS, BEM and SMACSS, into one place.
18. Bootstrap Sass
Prepros is an app dedicated to making compiling code easier. It compiles all of your Sass, Scss, Compass, Less, Jade, Haml and CoffeeScript in real time, with live browser refresh to keep your preprocessing workflow seamless. It has no dependencies and features a built-inserver, background file watch, error notification and live CSS injection. There is also a Chrome Extension for Live Browser Refresh, but please note, it is a Windows-only application.
20. Assembling Sass
Assembling Sass is a free online course from Code School to learn Sass and start improving your front-end workflow, so you can use Sass for efficient, time-saving styling on large-scale applications. It boasts a solid understanding of Sass, from the foundation to variables, mixins and CSS management to simplifying and optimizing your responsive workflow.
21. Sass Style Guide
CSS Style Guides are common; however, Chris Coyier of CSS Tricks extends this idea to cover choices unique to Sass. While there are common rules you should follow for any style guide, this is a specific list to Sass, including guidelines on nesting, variables, vendor and global dependancies, partials, line mapping, comments, media queries and CSS.
FireSass allows Firebug to display the original Sass filename and line number of Sass-generated CSS styles, making it useful for Sass development. To use, just download and install FireSass, then enable Sass's "debug_info" option. Please note: It hasn't been updated for some months, but it's worth exploring as a useful tool in your workflow.
Zocial is a CSS3 social buttons Sass framework. And the vector icons are implemented with a Sass @font-face mixin, usable as a Compass extension. The project includes buttons for Twitter, Facebook, Google+, GitHub, RSS, Smashing Magazine and many more. There is also full documentation on how to get started.
Breakpoint makes writing media queries in Sass super simple — just create a variable using a simplified syntax, based on most commonly used media queries, then call it using the "breakpoint" mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself to handling cross-browser compatibility issues.
Grails is an open source, full stack web application framework, used by companies such as LinkedIn, Sky and Netflix. It takes advantage of the Groovy programming language to provide a productive and streamlined development experience. This plugin adds Compass, Sass and Scss support to Grails, and automatically compiles the code.