- What does a CSS Preprocessor do?
A preprocessor is a program that takes one type of data and converts it to another type of data.
In the case of HTML and CSS, some of the more popular preprocessor languages include Haml and Sass .
Haml is processed into HTML and Sass is processed into CSS.
- What are the advantages of using a CSS Preprocessor?
- Enter the CSS preprocessing language. With it, you can start using things like variables,
mixins, and functions. It will allow you to start reusing properties and patterns over and over,
after defining them just once. Which brings us to...
- It'll make things D.R.Y. That stands for Dont Repeat Yourself. This reduces coders having to
enter code multiple times.
- Saves time because you don't have to enter things multiple times.
- Being able to use variables, mixins, and functions means you can define a value or group of values
once at the beginning of your document, instead of through it, making it easier to make changes later.
- Both Less and Sass support nested definitions which helps
keeps things organized and it just makes sense.
- With Sass, a simple command line command will instruct Sass to watch your Sass files, recompiling your
CSS automatically every time you save your changes. When using Less, theres an OS X app called
Less.app that does the same thing but with a graphical user interface.
- Time not spent repeating yourself and maintaining unwieldy CSS code means more time to focus on stuff
that will make your site shine. Use some of those spicy CSS3 properties you've been meaning to try! Spend
a couple hours on extra details and polish!
- I quickly learned that it's easy to pick up. Both Less and Sass .scss files are strict supersets of CSS.
This means that if you can write CSS, you already know how to write valid .less and .scss files. You can
start writing these files right away on your next project, and pick up the extra stuff as you go without
having to learn everything at once.
- Frameworks built on top of CSS preprocessing languages do even more heavy lifting. For example, Compass-
a framework built on top of Sass, automatically generates all those annoying vendor-specific CSS3 properties,
has lots of useful functions for generating grids, sticky footers, and more. It can even generate a sprite
sheet for you out of seperate images
- What are the disadvantages or issues you need to consider when using a CSS Preprocessor?
File sizes may be deceiving by being smaller than the original, generating the .css files can take longer, switching back
to just css can be hard, using different syntaxs in different preprocessors can get confusing, and if multiple are working on
the project, everyone must know to not edit the .css file because it will be overwritten and waste time and energy.
- List at least FIVE CSS Preprocessors currently available.
- Sass
- LESS
- CSS-Crush
- Myth
- Stylus
- Research Web Development jobs and see how many of them list a CSS Preprocessor as one of their
desired skills
Out of 3 jobs viewed in Iowa, none mentioned CSS Preprocessors. I then went to view job in Illinois,
and out of 5 jobs, 2 required knowledge. This is looking to be possibly a newer requirement that
may start to become more standard.