1
00:00:00,000 --> 00:00:05,990
As powerful as CSS is, there are going to be times when you want to be able to do

2
00:00:06,000 --> 00:00:07,990
something that the language just won't let you do.

3
00:00:08,000 --> 00:00:09,990
Let me give you a quick example.

4
00:00:10,000 --> 00:00:14,990
Let's say that you use this color, which is a burgundy, throughout your entire site.

5
00:00:15,000 --> 00:00:17,990
Complex style sheets can contain hundreds of rules.

6
00:00:18,000 --> 00:00:23,990
Now, let's say that your client decides to use this flavor of burgundy instead.

7
00:00:24,000 --> 00:00:26,990
At this point, you'd better have a good find-and-replace option in your CSS

8
00:00:27,000 --> 00:00:29,990
editor, or you're going to be doing a lot of work by hand.

9
00:00:30,000 --> 00:00:34,990
Wouldn't it be easier if you could simply declare a variable for the color at

10
00:00:35,000 --> 00:00:38,990
the top of your styles and then reference that variable throughout your code?

11
00:00:39,000 --> 00:00:42,990
To change the color site-wide, you could just simply change the color of the variable.

12
00:00:43,000 --> 00:00:47,990
Well, that would be great, but you can't do that with CSS--at least not yet.

13
00:00:48,000 --> 00:00:50,990
Well, that's where CSS preprocessors come in.

14
00:00:51,000 --> 00:00:56,990
CSS preprocessors are programs created to extend the functionality of CSS and

15
00:00:57,000 --> 00:00:59,990
make it easier for authors to write their code.

16
00:01:00,000 --> 00:01:05,990
They work by allowing authors to write styles using the preprocessor's extended syntax.

17
00:01:06,000 --> 00:01:10,990
This code is then processed by JavaScript or server-side languages, like PHP and

18
00:01:11,000 --> 00:01:15,990
Rails, and then generates styles for the browser.

19
00:01:16,000 --> 00:01:19,990
Most of the features of a CSS preprocessor are a little beyond the scope of this

20
00:01:20,000 --> 00:01:24,990
title, as they begin to move CSS away from a strictly presentational syntax to

21
00:01:25,000 --> 00:01:26,990
more of a processing language.

22
00:01:27,000 --> 00:01:30,990
However, I do want to give you a brief overview of some of the things that

23
00:01:31,000 --> 00:01:32,990
preprocessors allow us to do.

24
00:01:33,000 --> 00:01:38,990
We've already mentioned variables, and most preprocessors add those to the mix.

25
00:01:39,000 --> 00:01:42,990
Others allow you to nest rules in much the same way that HTML does, which can

26
00:01:43,000 --> 00:01:46,990
make writing styles a bit faster and a lot easier.

27
00:01:47,000 --> 00:01:50,990
You can also take class selectors and reuse them in other styles.

28
00:01:51,000 --> 00:01:55,990
This ability to mix in styles from one rule to another is an incredibly powerful

29
00:01:56,000 --> 00:01:58,990
way to write more efficient styles.

30
00:01:59,000 --> 00:02:04,990
Some preprocessors even allow you to pass values into a class, so that the class

31
00:02:05,000 --> 00:02:09,990
covers the basic styling of an element, while different values allow you to tweak

32
00:02:10,000 --> 00:02:11,990
it in each rule that references it.

33
00:02:12,000 --> 00:02:15,990
In most cases, you can also use operators.

34
00:02:16,000 --> 00:02:19,990
Now these allow us to do things like have the margin of one element equal to the

35
00:02:20,000 --> 00:02:22,990
margin of another element, plus another number.

36
00:02:23,000 --> 00:02:29,990
Now, that way, if the first element changes, the second element would maintain its spacing.

37
00:02:30,000 --> 00:02:34,990
Other preprocessors allow you to write simplified code for the new CSS3 features,

38
00:02:35,000 --> 00:02:38,990
adding the appropriate vendor prefixes and support for older browsers for you,

39
00:02:39,000 --> 00:02:41,990
after the code is processed.

40
00:02:42,000 --> 00:02:46,990
While CSS preprocessors are amazingly powerful, they aren't for everyone.

41
00:02:47,000 --> 00:02:50,990
Now first, you have to learn how they work and the syntax necessary for the

42
00:02:51,000 --> 00:02:52,990
preprocessor to work.

43
00:02:53,000 --> 00:02:55,990
In many ways, it's like learning a new language all over again.

44
00:02:56,000 --> 00:03:01,990
Second, your CSS is abstracted from you in a way that's not always acceptable.

45
00:03:02,000 --> 00:03:05,990
The CSS is processed and served to the browser when requested,

46
00:03:06,000 --> 00:03:10,990
meaning that the author doesn't always see the end result. The resulting CSS is

47
00:03:11,000 --> 00:03:15,990
often much less efficient than it would be if carefully authored by a designer.

48
00:03:16,000 --> 00:03:19,990
In many cases, JavaScript is required to process the CSS.

49
00:03:20,000 --> 00:03:23,990
In the event that a user has JavaScript disabled, your styles could end up

50
00:03:24,000 --> 00:03:26,990
malformed, or not even served at all.

51
00:03:27,000 --> 00:03:31,990
Perhaps the final point about preprocessors has really nothing to do with them.

52
00:03:32,000 --> 00:03:35,990
Many of the capabilities that preprocessors add to CSS are currently being

53
00:03:36,000 --> 00:03:38,990
added through CSS3.

54
00:03:39,000 --> 00:03:42,990
Eventually we should be able do the bulk of what preprocessors help us do

55
00:03:43,000 --> 00:03:44,990
without using them at all.

56
00:03:45,000 --> 00:03:47,990
I also want to caution any new designers out there:

57
00:03:48,000 --> 00:03:51,990
preprocessors and their syntax can be very complex.

58
00:03:52,000 --> 00:03:55,990
If you don't understand CSS or are just learning it, I wouldn't recommend a

59
00:03:56,000 --> 00:03:59,990
preprocessor until you're a little bit more comfortable with the native syntax of CSS.

60
00:04:00,000 --> 00:04:04,990
Of course, as with any tool, you need to decide for yourself if a preprocessor

61
00:04:05,000 --> 00:04:06,990
is right for your projects or not.

62
00:04:07,000 --> 00:04:10,990
Now, researching and experimenting with them is perhaps the best way to judge for

63
00:04:11,000 --> 00:04:12,990
yourself how effective they would be in your own workflow.

64
00:04:13,000 --> 00:04:15,990
So, let's take a look.

65
00:04:16,000 --> 00:04:21,990
Of the available CSS preprocessors, LESS and SASS are by far the most popular.

66
00:04:22,000 --> 00:04:27,990
LESS, which you can find at lesscss.org, uses syntax that's very similar to

67
00:04:28,000 --> 00:04:32,990
CSS's existing syntax, making it very popular with designers and easier to learn

68
00:04:33,000 --> 00:04:37,990
for those that might know CSS but maybe aren't as fluent with JavaScript or

69
00:04:38,000 --> 00:04:39,990
other scripting languages.

70
00:04:40,000 --> 00:04:47,990
SASS, which you can find at sass-lang.com, actually has two syntaxes that you can use:

71
00:04:48,000 --> 00:04:51,990
the older default syntax which has more in common with scripting languages, or

72
00:04:52,000 --> 00:04:57,990
the new Sassy CSS syntax that's designed to be a bit more like CSS.

73
00:04:58,000 --> 00:05:00,990
After checking out those two, you might want to spend some time exploring

74
00:05:01,000 --> 00:05:11,990
Turbine, Switch CSS, CSS Cacheer, CSS Preprocessor, and PCSS. Each has its own

75
00:05:12,000 --> 00:05:14,990
unique focus, and they come in varying degrees of complexity.

76
00:05:15,000 --> 00:05:19,990
Now CSS preprocessors certainly aren't for everyone, and they usually require a

77
00:05:20,000 --> 00:05:22,990
fair amount of experience to implement effectively.

78
00:05:23,000 --> 00:05:27,990
They are, however, extremely powerful tools designed to extend CSS and make

79
00:05:28,000 --> 00:05:29,990
writing it more efficient.

80
00:05:30,000 --> 00:05:40,000
That alone makes them worth exploring.