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
simpless

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.

codekit

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.

hammer

 Scout.app

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

scout

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.

prepros

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.

compass

WinLESS

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

winless

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.

koala

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?

crunch

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.

livereload

Discussion

  • http://varemenos.com/ Adonis K. (Varemenos)

    After I switched back to Windows due to my vacation’s laptop, I was kinda playing around with prepros and koalla which both are rather good but realized how powerful PowerShell actually is, so I finally got the chance to switch back to a terminal emulator.

  • Stephan Lueck

    I test it prepros and koalla is for me better for windows as the version of scout, but normaly i use for sass+compass too the powershell

  • Hassan Sadek

    I cannot believe that most application working ONLY in Mac.

    • György Kiss

      It’s not a coincidence.