Preprocesser Benefits

[00:00:00]
>> Mike: With that let's go into talking about preprocessors. What is a preprocessor? Well, Sass is one of them. These are things that, are tools that allow us to define something that defines similar concepts to CSS. But what we're writing is not CSS. It's often sort of an abstraction of it.

[00:00:20]
Something that gives us some things that CSS is missing. And three popular examples here are Less, Sass and stylist. All of these compile to CSS meaning you put them through a tool of some sort and they will return something a brother can understand. Often times these things are like, you'll run a command and you'll say, here's my input file, here's where I would like you to put my output file, and you will get CSS coming out.

[00:00:50]
So, these all involve variables, these all involve the ability to compose rules together. Meaning you can define something in one place and then bring that style into two different other styles or multiple other styles. You can define things like mix ins, which we'll get into later, they're almost like functions that return CSS if that makes sense.

[00:01:15]
And because these are relatively simple in terms of developer tooling, it's just sort of one file in one file out. Often times they're pretty easy to setup in that, in comparison to other things, right? It's often like a ten minute job or less to get Sass or Less or Stylus working with your project.

[00:01:42]
So why would we want to use one? And I'd like to sort of reword this a little on the fly and say, why would we wanna use this always? Why would you wanna reach for using a preprocessor, even for the smallest project that you have to tackle? Well first, it gives us stuff that should have been in CSS in the first place.

[00:02:06]
The idea of having a variable is pretty important right, because we often times we are repeating things like colors and paddings all over the place. You end up having to almost get like a pocket calculator out in order to define what should this margin be? Because I've got a side bar that's this width, and then some padding on the side of it, and all of that, all of those expressions, those should be built into the way we define our styles.

[00:02:33]
They should not be things that we have to do as developers in our brains.
>> Mike: You will find that it's easier to maintain your styles. It is harder to make subtle mistakes, right? Like misspellings and highly repetitive CSS are very, very common. It's easier to keep your styles organized.

[00:02:53]
So I heard some people in the room, they use Angular 2 or other component based libraries, like Ember. You want to kind of say, these are the styles that are defined for this component, and they exist in one file and they don't overlap or interact with styles for other components.

[00:03:12]
So we get the ability to kind of break our code up, in a way that makes sense to us as developers, without imposing a cost on our users enforcing them to download a whole bunch of files. And as I said, it's really easy to set this up and oftentimes we even get libraries like sets of mixens and variables that already come, set up for Sass or for Less.

[00:03:39]
So Bootstrap's a great example. Bootstrap 3, it used Less. Bootstrap 4 uses Sass. And the idea here is you could bring this in as a dependency and customize some of the variables that define what Bootstrap looks like. Rather than superseding the Bootstrap CSS that you bring in, and overriding it you can sort of tune it so that it's the way you want it to look in the first place, which is a lot cleaner, it results in a lot less code being sent over to your users.

[00:04:14]
Just better and easier to maintain overall. So, lots of good options for using pre-processors. Today we're going to be focusing entirely on Sass.