Define CSS Preprocessor

  1. What does a CSS Preprocessor do?

    2. 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.

  2. What are the advantages of using a CSS Preprocessor?
    1. 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...
    2. It'll make things D.R.Y. That stands for Dont Repeat Yourself. This reduces coders having to enter code multiple times.
    3. Saves time because you don't have to enter things multiple times.
    4. 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.
    5. Both Less and Sass support nested definitions which helps keeps things organized and it just makes sense.
    6. 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.
    7. 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!
    8. 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.
    9. 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
  3. 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.

  4. List at least FIVE CSS Preprocessors currently available.
  5. 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.