25个基础的Sass和Compass工具推荐

1. The Sass Way

SassWay覆盖了最新的关于如何使用SassCompass的最新资讯和观点。里面的文章,资源和教程非常适合初学者和进阶用户。这是一个有着一支团队协作和贡献的,它经常更新,你可以订阅RSS,或者跟随他们的TwitterFacebook.

2. Compass.app

这是一个使用Java语言写的跨平台的APP,它不需要命令行就可以帮助用户快速转换Sass和Compass为样式表。

3. Scout

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 your CSS workflow by giving you more control, organization and optimization.

4. Compass Recipes

一个提供大量使用Compass和Sass写的CSS代码,它包括丰富的backgrounds, effects, icon fonts, forms, layouts, media queries等。它架设在github上,可以复制使用。

5. Bourbon

又一个简单,轻量级的Sass函数库。

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 HTML with presentation classes and extra wrapping divs.

7. Susy

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.

8. Codekit

Codekit is a powerful compiler that processes Sass, Compass, Less, Stylus, Jade, Haml, Slim, CoffeeScript and Javascript files 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.

9. Sassy Buttons

Sassy Buttons is a compass extension that helps you create customizable, attractive CSS3 buttons 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.

10. LiveReload

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.

11. Hammer

Hammer has been dubbed a “game changer” for web development. It ships with built-in support for Sass (with Bourbon), with automatic language compilation, to HTML, CSS and JavaScript. It boasts HTML includes, clever paths, variables, auto reload, to-dos and dynamic image placeholders. Also of interest is companion menu bar app Anvil, which runs local Hammer builds, and Rock Hammer, a curated project library for Hammer.

12. Forge

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.

13. Normalize.css (with Sass or Compass)

Normalize.css is a popular HTML5-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.

14. Sass for WordPress

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.

15. Sassaparilla

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.

16. Sass Modular Scale

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.

17. MVCSS

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

Bootstrap Sass is a Sass-powered version of Twitter’s Bootstrap, ready to drop right into your Sass-powered projects. Installation is straightforward: Set up your Ruby On Rails installation, import Bootstrap in an SCSS file to get of all Bootstrap’s styles, mixins and variables, then include Bootstrap’s JavaScript files. Once you have installed the gem and created a new project, you will start with a styles.scss file ready for your alterations, a compiled stylesheet and a copy of the Bootstrap JavaScript and images in their respective folders.

19. Prepros

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-in HTTP server, 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.

22. FireSass (for Firebug)

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.

23. Zocial

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.

24. Breakpoint

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.

25. Grails Sass/Scss Plugin

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.

Image via iStockPhoto, Oxford

英文原文:http://mashable.com/2013/06/11/sass-compass-tools/


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流