A CSS preprocessor is a program, separate from any web client or server software, usually hosted on the programmer's machine, that optimizes and compiles psuedo-CSS code from a source file. Much like a C compiler can compile a C source file into bytecode, a CSS preprocessor can compile a markup language like SASS or LESS into CSS that the browser can intrepret. Note that the source code file, and the compiled product, are both in plain text.
Using a CSS preprocessor allows the programmer or designer to use a number of tools and optimizations, that would be otherwise unavailable in standard CSS. These optimizations include: variables, mixin functions, font stacks, and nested property lists. So, for example, using SASS, instead of writing this hard-coded CSS...
div {
background-color:cyan;
color:black;
padding:20px;
font-size:1.1em;
}
div ul, div table {
width:100%;
background-color:green;
color:black;
font-size:1em;
}
You could write this simpler, marked up SASS.
$BgColor1 = cyan;
$BgColor2 = green;
$Text = black;
div {
background-color:$BgColor1;
color:$Text;
padding:20px;
font-size:1.1em;
ul, table {
width:100%;
background-color:$BgColor2;
color:$Text;
font-size:1em;
}
}
One important difference, between using standard CSS and a preprocessor, is that raw CSS doesn't need to be compiled. You can copy the style source file to your server, immediately after saving it, and the changes will take place immediately. Preprocessor CSS requires another step. The file, ending in .scss or .sass, is not directly interpreted by the browser, and is considered useless or unreadable, until it is compiled.
Optimizing to use a Preprocessor also has the potential for breaking certain elements, or ignoring important rules, depending on the programmer's specifications or oversights.
SASS, LESS, Stylus, CSS-Crush, Myth.