What is a CSS Preprocessor?

Video loading...

  • 0:00
    [What is a CSS preprocessor?}
  • 0:02
    [Learning Sass and Compass, Chapter 2, with Addison Berry]
  • 0:05
    Sass is in a class of tools called CSS preprocessors.
  • 0:09
    CSS preprocessors have been around for quite a while,
  • 0:13
    but they really started to gain popularity in the last several years.
  • 0:16
    So in this lesson we're going to take a look at what is a CSS preprocessor?
  • 0:22
    What are the benefits to actually using them, and why are they becoming popular now?
  • 0:27
    And then we're going to finish it up by looking at some of the
  • 0:30
    most popular CSS preprocessors that are out there today.
  • 0:34
    So let's dive in and start with the basics.
  • 0:38
    What is a CSS preprocessor?
  • 0:40
    At its most basic, a CSS processor really is just a scripting language
  • 0:45
    that extends regular CSS, and then you use some sort of program,
  • 0:51
    application, to compile that scripted language into the regular CSS syntax
  • 0:57
    that your browser is expecting to see and use.
  • 1:00
    So it's just a matter of basically learning a new language that's very similar to CSS
  • 1:05
    but has some additional things that you can use in the language
  • 1:09
    and sorting out how you're going to get that compiled into regular CSS.
  • 1:14
    When it comes to reasons for using a CSS processor,
  • 1:17
    there are actually quite a number of reasons
  • 1:20
    and the reason that they're becoming so popular.
  • 1:23
    So you can write sort of cleaner, more readable code in your CSS files.
  • 1:28
    You have lots of reusable pieces, so you can sort of define something
  • 1:33
    in your CSS and then just reuse a shorthand for that or reuse
  • 1:38
    the chunks of CSS that you've written, without having to actually,
  • 1:41
    literally, write it out every single time that you need to use it in your code.
  • 1:45
    And there's ways of, visually, organizing your CSS code
  • 1:49
    that makes it easier to read and see what's being applied where.
  • 1:52
    You also get some flexibility to do things on the fly.
  • 1:56
    You have various things you can do with conditions.
  • 2:00
    So if this, then do that.
  • 2:03
    And you can do things like calculations,
  • 2:06
    You can use math, and you can modify colors, based on a variety of things
  • 2:11
    that sort of happens as you go, rather than having to actually
  • 2:15
    hard-code that information directly into your CSS.
  • 2:19
    You also get exposed to a lot of snippets libraries, things that other people
  • 2:24
    have written to solve common problems.
  • 2:27
    And you can simply—It's very easy to import those into your CSS
  • 2:32
    and reuse what other people have created.
  • 2:35
    You can also, once you've sort of created your own way of approaching a problem,
  • 2:39
    you can share that with other people, either generally in the community,
  • 2:44
    the web community, or, let's say, on your team working on a project,
  • 2:48
    you may come up with a solution within the CSS that you would like everybody to use.
  • 2:54
    And you can bundle that up and then let everybody use it really, really easily.
  • 3:00
    And the other really nice thing is one of those common problems
  • 3:04
    that people solve using CSS preprocessors are cross-browser compatibility issues.
  • 3:11
    And there are a lot of libraries of what they call mixins
  • 3:18
    available that solve these common problems.
  • 3:21
    And then when you write your scripting language,
  • 3:25
    your CSS preprocessor language, when that gets compiled
  • 3:30
    into the regular CSS that browsers read, it adds in all of the information
  • 3:35
    that's needed to make sure that your CSS actually does work across all browsers.
  • 3:39
    So it's a huge timesaver in terms of having to troubleshoot and track down
  • 3:44
    and make sure that you're writing the correct code for all
  • 3:46
    of the different browsers that you're trying to target.
  • 3:48
    There are a number of CSS preprocessors that are available today
  • 3:53
    The three main ones that are quite popular are Sass, LESS, and Stylus,
  • 4:01
    with Sass and LESS probably being the two most popular ones
  • 4:05
    that people are using these days.
  • 4:09
    [Drupalize.Me: Learn Drupal]
Loading ...

What Is a CSS Preprocessor?

Loading...

Sass is in a class of tools called CSS preprocessors. CSS preprocessors have been around for a while now, but they've really started to gain in popularity in the last several years. In this lesson we'll find out what a CSS preprocessor is, what the benefits of using one are, and which ones are popular today.

Additional resources: