CSS Preprocessors Resources And Apps

A CSS Preprocessor is a tool which makes CSS powerful, flexible and easier to write. CSS Preprocessors adds new functionality to css such as variables, constants mixins and functions.

CSS Preprocessor Languages

Stylus — a dynamic stylesheet language designed influenced by Sass and LESS.

Sass — is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

LESS — LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

xCSS — an object-oriented CSS Framework

CSS Preprocessors Applications

SimpleLESS

Simpless compiles less into Beautiful CSS

Codekit

CodeKit helps you build websites faster and better. Its flagship features are listed below and the one-minute teaser video to the right is a good place to start.

Hammer

Hammer is a web development tool for web designers & developers. Build out static HTML sites & templates quickly and easily. No fuss, no mess, no PHP.

 Scout.app

Scout is a cross-platform app that delivers the power of Sass & Compass into the hands of web designers.

Prepros

Prepros is a free and open source web design & developement tool that does all the heavy lifting needed to preprocess CSS , JS & Images and keeps your preprocessing workflow seemless.

Compass.app

Compass is a stylesheet authoring framework that makes your stylesheets and markup easier to build and maintain. With compass, you write your stylesheets in Sass instead of plain CSS.

WinLESS

WinLess is a Windows GUI for LESS.js. WinLess is a must-have for the web developer who uses Windows.

Koala

Koala is a GUI application for Less, Sass, Compass and CoffeeScript compilation, to help web developers to use them more efficient.Koala can run in windows, linux and mac.

Crunch!

Everyone loves LESS. After all, who isn’t tired of typing all the browser prefixes to make some kick-ass CSS3? But don’t you wish you could organize your LESS/CSS styles into some well-organized libraries, and then just serve a single file to the browser? Or render your page without relying on JavaScript or command-line geekery? Wouldn’t it be great if you could just edit LESS, and then save CSS?

LiveReload

LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.