Very cool.

So yeah, my name is Bermon, and excited to be here today.

It's my first time in New York.

And it's pretty awesome so far.

I kind of dig it.

So, I work for a company in Charlotte called Cardinal Solutions.

And I'm their UX lead in the North Carolina region.

And I run a team of, of user

experience designers, [INAUDIBLE] designers, and front end developers.

And so, I get to tinker with a lot of things.

And I think it's a lot of fun.

So, in the Charlotte community I run the New Experience Group,

The Front end Developer Group, and I think he actually uses Sass.

Who's going to Sass comp this weekend?

I guess is a better question.

See that one hand, two hands, couple hands.

So, I work with the Sass project a bit, with Gina and Michael who spoke yesterday.

Gina's speaking later on this afternoon.

Doing the re-brand of, of Sass and it's website, and it's documentation.

Making things a bit more friendly.

So, I do love Sass.

And most recently about a month ago, I ran a conference

in Charlotte called [INAUDIBLE] conference and I love cupcakes so much.

They are my most favorite things to eat, so if anybody knows a really good

cupcake place here in New York, let me know because I would love to go by.

I also love root beer, it's the best thing ever.

If there's a place on, with root beer on tap, definitely let me know as well.

And, if I can combine the two, and have kind of like

these root beer float cupcakes, then that would be even more amazing.

And I also love travelling.

My wife is from Ecuador, South America, we enjoy going down there.

Specifically to a city called Quinka.

It is this really fantastic town.

Nestled in between the Andes Mountains, and it's like 65 degrees, all year round.

And the food is amazing, everybody speaks Spanish.

And it's lets me practice, so I totally dig it.

And you're going to follow me on Twitter as Bermon Painter, and we can chat.

So, today we're going to talk about pre processors,

and we're going to compare stylus Less, and Sass.

They're all fantastic they all have a fantastic feature

set, and I think you're really gonna enjoy it.

So, we're gonna talk about the history of

CSS, pre processes in general, kinda what they are.

How to get them set up.

The features, the features today are

divided up into beginner, intermediate, and advanced.

And so, you can kind of build on base

features, and progressively move forward into more advanced topics.

And, then we'll talk about some of the frameworks that exist.

To make our jobs easier.

As a front end developer, I'm kind of lazy, so if frameworks can do

things for me, I will definitely let them do things for me, and not complain.

So we're gonna do a history of CSS really quickly.

So way back in the day, and this is kind of Bermon's version of the history of CSS.

Way back in the early days of the web,

CSS acutally didn't exist, and I've been working on

the web now for I don't know, ten, 12,

13 years, I've kind of lost track and stopped counting.

But I originally got into the web, many years ago when I was in high school.

Probably 16, 17.

I had joined an online gaming guild, called the imperial rulers of destiny.

And we were a Star Craft and Diablo gaming guild.

Anyone play Star Craft or Diablo back in the day?

Yeah!

I was killermoo online.

And the guild had a website, we'll they

had two websites, one on tripod one on geocities.

They were glorious and that was kind of

my first foray into tinkering with dream weaver,

poking around into lots of tables and spacer

gifs [COUGH] and just really really horrible stuff.

That I'm really glad we've moved away from.

And, I remember when CSS first came out.

I think my brother was taking a class in college.

And [INAUDIBLE] I think you should try this CSS thing, it's pretty neat.

And, the only thing really understood how to do was

to had like this class underline rule, no underline rule.

That would remove underlines from all the links.

Really horrible idea, never do that.

But that was my first experience with CSS.

And as the web kind of progressed, CSS became a bit more complex.

We had basically a single CSS file, and as the web progressed more, we added more

CSS like a base, a something for layout, something for typography, whatever it was.

I think we should do a wide array of CSS files

that we use to create a website and then I was nice.

And they provided initial comments, so we can sort

of get out ibugs and into their specific files.

And, we had some more files we could add onto it.

And that was performance impact.

It made things a little slower, not quite as elegant.

Now, CSS had this really nice feature called an Import Directive.

And, what that allowed us to do is to take those external files, import

them into a, a base CSS file, and then to serve a single file.

But, it still didn't help performance, cuz it was still going

to put out another file, which wasn't really all that fun.

HTML5 Boilerplate kind of came out and this is

something that they kind of created to be able to,

instead of wrapping external style sheets in conditional comments,

we could wrap the HTML tags, stick on some classes.

That cleaned things up a little bit, but we've still got all these extra files.

So, that kind of leads us into pre processors, and

some of the really amazing things that they can do.

So, what is a pre processor?

I think it's really magical.

And they do so many amazing things, and he's super scary up there.

But basically what a preprocessor allows us to do, is take a series of

files, preprocessed files, and in this case

this is the, the Sassy Syntax, or Sas.

It allows us to take these files that a browser doesn't understand.

Compile those into something the browser can understand.

So, you can take all these files, and compile them into one.

Something that we can serve through a browser,

and that in a nutshell is what pre-processor is.

And, it gives us all the nifty things that I'm going to just brain dump on you today.

So, there are three primary processors that exist right now.

One is Stylus, built on Node.

We also have less, which is fairly popular, also built on Node.

And, then we have Sass, which is built on top of Ruby, and I love them all.

I think they're all fantastic.

So.

One caveat I think is important to keep in mind, is that if you

write crappy CSS right now, and use a preprocessor, it's not a magic bullet.

It's not gonna make your CSS amazingly better.

It's still going to suck or it could suck more.

Or it could suck more.

It depends on how you write your CSS.

So, learn to write good CSS.

Regardless of what you're doing, there are a

handful of resources out there that will help.

But, let's get started.

So, the, the quickest way I think to get up,

and running with a preprocessor is to use a GUI App.

They're nice, especially for designer type folks.

One of the most popular I think is Code Kit.

It is not free but it is amazing.

It basically has pre-processors for everything, HTML, CSS, and JavaScript.

It'll [INAUDIBLE] it'll minify, it'll [INAUDIBLE]

JavaScript or GSLint and compress other images.

Really handy tool.

This is MAC only.

On the windows size you have prepros which basically does the same thing.

You also have live reload, which works across platform.

Compass app as well, also works across platform, but it is Sass and Compass only.

And then Scout, is the Windows version of that, basically.

And, gooey stuff aside, I really love code pin.

It is a fantastic tool.

It's basically like the, the dribble for foreign developers.

So, it allows you to go in and tink without installing

software, buying software with, with any preprocessor, and see its output.

It's a fantastic tool.

Now the second option, is you can use the command line.

Now personally, this is the way that I use things.

Because I hate running different applications, and I personally

think the command line's the best GUI out there.

So, if I was going to install things

in Sass, Less, or Stylus, there's a dependency.

If you're on a Mac well, if you install Less

or if you install Sass, you have a Ruby dependency.

So, GM has a package management.

I called gems.

Gem install Sass.

It does it's stuff.

Less and Stylus they run on Nodes so you have to install some other things.

You have to install Node and MPM, and then get up and running.

So, it takes a little bit more effort but basically the same result.

Basically you're taking.

A preprocess files, and processing those, or compiling those into CSS files.

Now, the reason I say it, even mention the

command line, is that you never what can happen.

If you don't have something set up and you need to get

your CSS processed, or your pre processed stuff processed in your normal CSS.

Your developer could run off, you could be

eaten by a dinosaur that spits stuff at him.

And, then you can be like alright, I got this.

It's just eunuchs.

I can totally use command line, and you can

save your team from velociraptors and it's all great.

Now, if you're a designer or if you're not familiar with the command line, John Long.

Has a really good article on, using the command line as a designer.

I probably day to day maybe use ten to

15 commands within the command line to do my work.

And that, that's with get and preprocessors and various odds and ends.

There's not to much to it.

You can totally destroy things if you want to, but

you have to try really hard to make things explode.

Now, before we get into the actual features, there are a handful of

ways that you can process or compile your CSS and Less, Stylus, or Sass.

The most common, I think, is local.

So, you do this on your local machine,

either with a GUI application or the command line.

The second way to do this, you can do it on deploy.

This is something that a developer probably take care of for you,

[COUGH] or if you're a developer this is probably what you might use.

And so for you using an application stack, either a Node or in Rubby or

even PHP, you might not want to keep all these static CSS files on the system.

You want to keep your.

Your native or your, your preprocessed files.

So, you don't wanna compile everything to a static

asset, before you send it out to the server.

So, you do that on Deploy, or you can do it On Request.

So, if you have everything living on the server, you

can have the server compile your assets into native CSS files.

Not the best way to do it.

So you, you kinda have to do this,

this two step process where you compile, and cache.

Otherwise, you're gonna be compiling it at

every request which isn't the smartest idea.

And, and then you get on the client, but you

should never be on the client, that's a whole new idea.

This is something that Less allows you to do, their, their Less JS file.

That basically allows you to serve the browser your Less files,

and then the JavaScript does the compilation stage on the client.

Not very efficient.

Not a good idea in production.

So, just ignore that one.

But, it exists if you wanted to do it.

But, just don't.

so, syntax.

Now.

Sass, way back in the day, only had a single Syntax.

It was called the Sass Syntax.

Which is actually what you see here behind my head.

It was fairly terse: no curly braces, no semicolons.

And later on they came out with the Sassy syntax, or the SCSS syntax.

Which looks just like normal CSS.

Less follows the same syntax.

Stylus has two.

They have the normal CSS looking syntax, and then they have

the [INAUDIBLE] looking syntax, no colons, no semicolons, no curly braces.

You just kinda type and things happen.

So, the best way or the easiest way to, to take a, a normal CSS file

this is one of the things that I

like about preprocessors especially all of them now.

Is you can take existing CSS files, change

the file extension and you have a preprocess file.

So you don't have to change everything all at

once, you can kind of do bits and pieces.

And I move forward from there.

So, the the file extensions for Sass are either S-A-S-S, or S-E-S-S.

For Less, it's just LESS.

And then for Stylus, it's just S-T-Y-L.

That's all you really have to do.

Now, one of the things I really enjoy about preprocessors is

that it allows me as a developer to be more efficient.

And, one of the basic features is the ability to have variables.

Now, I love this.

And, Nicole Sullivan tells a story about Facebook, and her

going in to help make Facebook's frame architecture, much more efficient.

So, what tends to happen I think,

especially, as we're tinkering on the web is.

When we're trying to,to, nail down colors, we're just like

do a screenshot or do a nice little color picker.

And like that's close enough let's grab that color, that's what I'm going to use.

And the case of Facebook, they had such a crap ton Facebook

blues, basically threw out their site and because of that very reason.

So, what [INAUDIBLE] allow you to do.

Is to take values that you would

use consistently, and apply those throughout your site.

So, in this example, we have basically, what we're using, colors.

And we're doing, like, site width, you can do font stacks.

Basically, any value you can assign to something to use later.

And it allows us to be efficient.

So, we can declare it one place.

And use it to route our CSS.

Sass, the way the Sass calls a variable is with a

dollar sign, Less is with an ampersand, Stylus doesn't really care.

You just type something, and you have a variable.

It's really weird, but very awesome.

If you hate typing and you can't type like me.

And this is what it spits out.

So, basically takes whatever you assign to those variables,

and where we use them, it fits in the value.

[COUGH] Now the second thing that I really wish CSS allowed

me to be able to do is to nest my values.

So this is a really simple example of.

A navigation.

basic, basic Nav element with UL, LI, and some links inside.

And it's fairly redundant because, I'm scoping everything

to Nav and then scoping it to the

UL, and then to the LI and then to the a and then doing my rules.

Now I'm very efficient.

Kind of a pain to type.

So, what preprocess allows us to do is nest that.

And that may look kind of messy.

There aren't many, many rules to it, but it basically

allows me to, to nest things inside of my curly braces.

so, visually they make more sense, only typing Nav one time.

And this is what it spits out, just like what we started out with.

Now one thing to keep

keep an eye on is specificity.

Nesting is a little bit addictive.

A lot of fun, but you can go too deep.

So, tip of rule of thumb, is any more than three

selectors, probably too far so bring it back a little bit.

So, we can take that same example, make it a little

more elegant, a little more [INAUDIBLE] and spit out something like that.

And so we're not targeting, basically we are not going all

the way down the DOM tree to get all our stuff.

We're only targeting what we have to target to get the styles that we need.

Now another thing that all three have, they have the, this

idea of a parent selector and they do that with an ampersand.

So in this example we have an L element and we want something just specific to IE.

So, much earlier we talked about the HTML

with the i classes inside the conditional comment.

So, what is this allows us to do is, we can nest but we can also use our parent

selector, and what that ends up doing is allows us to go outside of our scope.

And, assign the higher class which will be .i e seven which is up on our body

our map somewhere else, as a as a descendant and what it does

where ever that ampersand appears it goes up in our our rule to find Nav.

So, basically injects Nav where the ampersand

is and this is what it spits out.

So, what it allows us to do is keep light sections of Code chunked together, so,

you don't have rules that are changing specific

sections of CSS, all over our CSS files.

So, that helps us keep things nice and modular.

All right.

Now we talked about import as well.

So import, good idea, but it didn't really work that well in native CSS.

So, what all of the processes have done,

is they've basically taken over that import directive.

So, that allows us to take all these extra files, and

still serve a single file, or a series of small files.

Into something like this.

So basically we take our import, this is how it looks.

The progressors were smart enough to know that,

you don't have to put on the file extensions.

You just type the name, and tell it you want to import it.

And what it does is it, is it goes out

and grabs those files, and concades everything into a single file.

So, when it spits out your native CSS.

It can condense everything together into, to that one file.

And it is fantastic.

So, those are, basic, preprocessor things.

Now intermediate, this is where Lazy Bermon really, really likes his

stuff, because I really hate, popping all the vendor prefixes in.

There are tools out there that make this a little bit easier.

But there's a concept of mixins, and they do a fantastic job doing vendor prefixes.

So, we have a box, for example, and our box we want to

give it rounded corners because that's kind of the cool thing to do.

Not so much any more, I guess now I would want to make things flat.

But, we'll stick with border radius.

So, we have to type that five times and every time we're

gonna change that value we have to change the value five times.

So, what the mixin's basically are, is they're these chunks of CSS

Code that allow us to be more efficient in how we write things.

So, it kinda makes it in Sass, you just do ampersand mix in.

And we give the mix in a name.

We're going to call this mix in border radius.

And this border radius has some parentheses.

And you notice the dollar sign.

That's basically a variable or parameter that we can pass in.

And then inside our mix in, we're gonna write our

CSS Code that we want to use throughout the site.

Now, instead of us hardcoding in a value, we're putting our variable in there.

So, then the color mix in, we have a box

class, and we're just going to go alright, mister box,

we want to include a border radius, and we want

that border radius to have a radius of five pixels.

Less does something very similar.

And instead of the ampersand, though, you're just basically writing a

class, adding on some perens, doing a Less version of a variable.

Structurally it's all the same.

When you call it, you don't have to do include, you just do class border radius.

And the pass innervalue.

Stylus, they just don't really care.

You just type border radius, did some prints, stick in a value.

Do the same thing in a box.

Again, [INAUDIBLE] that crazy stuff.

Just type in border radius and the value and

it spits out, kind of what you would expect.

Now, one of the nifty things that Stylus does.

Is they have this concept of transparent mix ins.

So, I can just do order radius and do empty prints with no

parameter, and then, inside of my mix in, I can just type in arguments.

So, basically, anything I type inside the prins,

it'll stick in arguments, which is pretty nice.

And then, we'll just call it.

And this is what it spits out.

So, this is really fantastic for all these crazy C-S-S

Remix-ins and inner proofing stuff that we have to maintain.

And so in essence I can use one of these mix-ins so any time

you know, if the Spec updates and you know MS and Mahs and Alkra.

All those inter prefixes go away.

I can update that single mix in.

And it'll play everywhere I use it in my CSS.

So, it's super efficient, and easy to maintain.

Alright.

So the next thing is, there's an extend principle.

Now, previously, SASS had this, and Stylus added it.

And about, the latest version of Less, also added this extend concept.

One of the problems with, with mix ins is that they're, they may look nice and

efficient as a you know, a pre process CSS, but the output is kinda redundant.

Some things don't look natural in some cases.

So, what extend allows us to do, is

basically extend a class, and use that class elsewhere.

But, instead of spitting out redundant code

it does [INAUDIBLE] CSS rules, which is a

bit more natural, and I'll show you an example of that here in a second.

So, we're gonna create a border class.

And inside that borders class, we're gonna have borders and some padding and

then we want to extend that class on our paragraph in our list.

And have them be borders.

So, you can basically stand any class

anywhere you don't have to do anything special.

You just call like you would normal class, and you can send that anywhere CSS.

So to extend, you're just going to write @extend.waters.

Or whatever the classroom is.

Same thing with Stylus.

It follows.

It actually wants you to use extend.

Which probably make sense.

And then this is what it spits out.

So, it gives us a nice, [COUGH] compact [INAUDIBLE] limited CSS rules.

Up at the top, and anything else that is not using those rules is down below.

Now, one of the issues I think with the extend is that if by chance we weren't

using our borders class and you were in HTML,

we're still spitting out the class in our CSS.

So, Sass came up with this, this extra

client set called Placeholder Directive that basically allows us

to create these transparent classes, or place holders

of CSS, goodies that we can apply later on.

So issues on the ampersand, so instead

of extending a class we're extending ampersand borders.

And it spits out all the same stuff without that extra class.

Now some advanced stuff.

Now as this, this is kind of where the, the pre processors

start to divide a bit in the things that they can do.

So functions, are basically used to calculate.

They do Math.

I suck at Math.

Functions make me doing Math much easier.

so, one of the most popular ways a function is used

to create really simply root systems, or really complex root systems.

So, what I wanna do is I wanna turn this very

static grid into something that we can reuse over and over again.

Now, these are are static widths.

We want to convert them into something percentage

based, so we can have a more fluid layout.

So, we have a container with a width of 960.

We have an article and an aside.

It's a typical article/aside layout.

Big article, tiny aside.

And we can do something like this.

So, we can combine our variables with some functions, and we can use those.

So, this is how Sass would do it.

So we have a, a grid columns, so basically we're gonna do a 12 column grid

system, and we're gonna base it off of

960, we'll convert everything through, to per, to percentages.

So we create our function, @function.

We're gonna give it a name.

We're gonna call it, calculate column width.

Again we have some params we pass in parameter.

We're gonna call this one columns, so we're gonna calculate our column

width based off of the number of columns we put in there.

And then, we return whatever the calculation is, that's what it

is, I'm not going to say it because that meh stuff.

So, we have our container, we're going to set

our container to 100%, so it will even flow with

the width of the browser, and then for our

article we have our width and width on the aside.

In order to call a function.

We just call the function name.

Calculate column width and out of, out of those 12 columns,

we put in the number that we wanted to take up.

So, basically you want, we have 12 columns.

Robert's was gonna take up eight, and our side will take up four.

This is how it looks in Less.

Pretty similar.

Does basically the same thing.

This is Stylus, much more terse.

But same concept.

And then this is what it spits out.

So, it runs that function and spits out a

percentage width for both [COUGH] with decimal places whatever, whatever.

Not so pretty for us, but the browser doesn't care.

Another thing that I really like is the

color functions that exist in all the preprocessors.

[COUGH] I work a lot with, with, [INAUDIBLE] themes.

So it's very handy for me to be able to pass in a single color of IU or

shades of color IUs and create a very robust

theme based off a sing, series of single values.

So, you can lighten you can darken, you can adjust the hue, you can saturate,

desaturate, you can convert everything to gray scale,

you can decomplement colors, you can revert things.

And Sass just has a crap ton of that this is for like half of what Sass has.

Less and Stylus, that's pretty much all they have.

So this is a really good way to build a [INAUDIBLE] framework on top of your CSS.

So, this is kind of how they work.

So let's say I have a series of links, I'm going

to collor them blue, because that's the collor links are I guess.

And, whenever you hover over them, I want them to be just a little bit darker.

So, I can darken my blue 10%, do that across the board,

and it spits out the appropriate hex value, which is pretty handy.

Now, this is where the divide really starts to happen.

They all have various control directives where.

A basic logic statement so, Sass has; if, else if, else, then, for, while.

Less your stuck with, when.

Then Stylus goes; if, else if; else, unless.

And you can do some really nifty things, having that logic,

one of the things are in this example creating a button.

Now, aesthetics constantly change.

Ten years ago everything was nice and glossy, and had

that apple aesthetic, and then we went to just gradients.

And now, now we're all flat, which is all silly, but aesthetics change.

So, what I can do in my, my Sass, or basically any, any

of the free processors, is I can create a mix in for my buttons.

And in my buttons, I'm gonna pass in two parameters.

I want to pass in a color and I wanna pass in a type.

So, I'm predefining three different types.

Flat, gradient, or glossy.

And I can use some if else statements to spit out

the appropriate CSS depending on how I use this mix in.

So in this case, I'm going to do green glossy button.

And what it will do, it runs through the

logic and finds the else if for my glossy type.

And that is gonna spin out a linear gradient with

a very hard gradient.

So, the [INAUDIBLE] is gonna have a hard edge.

This is how you do in Less.

Now, Less, remember, you have a while statement,

and or which than, which is kind of weird.

For me, I think.

So, you basically have to define your mix in three times, but you have that added

when, so whatever type equals whatever you're trying

to define, in our case flat gradient and glossy.

It spits out the appropriate CSS, and then you can call

it down here below, so I call buttons green and glossy.

And it spits out the necessary C, CSS.

And Stylus, looks just like the, the Sass version with out all the extra stuff.

That's what you get.

So, little bit extra work, but for nice modularity and ease of use.

Now that, that's a super simple example.

You can do.

Lots of crazy things.

If anybody ever has a chance to peek

under the hood of, SensoTouch their mobile framework.

Everything they do is in Sass.

They do some crazy, robust stuff in their, their Sass files.

Worth digging into and seeing all the craziness that they're doing.

And this is where Sass kind of steps ahead.

So, Sass had basic control directive, so this is a four loop.

So basically it allows me to generate, a lot

of CSS with only a very small section of code.

So I can, I can go from I, and I want to generate.

A series of classes from one to five pixels.

So, I'm setting border widths and I can interpolate which

is what the, the hatch and the colored [INAUDIBLE] do.

And this is what it spits out.

So, I can go border one, two, three, four from that.

Another thing that's kind of similar is each.

So in Sass, you can basically assign an array to a series of variables,

and we're gonna do our array as

happy, sad, excited, mustached, because that's pretty awesome.

And then I can use an each loop, so for

each emotion in emotions, which is our array up top.

We're wantin' to do feeling, and whatever our emotion is.

So we're basically generating a handful of class names, and then

we also wanna generate an image that goes along with it.

So, for every emotion we have an image and we just wanna use interpolation to

to dump in whatever we have in our array, as our class and as our background.

And that's what you get.

[BLANK_AUDIO]

So, it's pretty handy.

Now I use this, on the [INAUDIBLE] conference website.

As a little [INAUDIBLE] case I had, of 51 speakers.

And each one of those speakers had, had an image, and one

of the images is the background image, so I could, compress them down.

I'm kinda using the poor man's.

Response image technique where you double size, and save

the mat as really, lossy looking JPEGS and then

compressed them back down, and then it works in

retina and non retina devices with a small file size.

So, I didn't create 51 of those.

I didn't want to write.

51 CSS rules with all the background stuff for all my speakers.

So, I use that I basically assign all my speakers to an array.

And use four or five lines of Sass Code to spit out like 150 lines of stuff.

Whatever that ends up being.

I'm lazy, makes me efficient.

Another thing that that is really nice, is the ability

to work with media quarries responses, responsive design isn't new anymore.

It's progressing and improving and, it's being used everywhere.

So Sass, allows us to use media queries with much more ease.

So in our case, we can assign simple break

points to variables, so we have small, medium, large.

And you can do this as many times as you want.

And then we can use those media queries,

all those variables inside our CSS, our Sass file.

And, so we can nest those again.

This allows us to chunk, like sections of code together.

So, we can maintain the things easier, and find necessary CSS.

So, that's what we get.

This is the last version.

Looks pretty much the same.

Stylus version, and then that's what spits out.

So it makes maintaining that a whole lot easier.

Now, one of the things that Sass has, that Stylus and Less don't have

yet, I'm assuming they'll add it some time, is an idea of a content directive.

So it allows us to create a mix in, but it allows us to

pass in a series of rules inside the mix in, by using our content directive.

So, you will notice it's a typical mix in.

We are going to create a mix in to

create, make using those media craze a little easier, and

we are going to call this mix in respond to and we are going to respond to a name.

So in this case, we have small screen, and large screen as our names.

And then we have our media query for each one.

For our small screen, for our large screen, and then the content.

So, use case is down here below.

So we include our media query, which is a respond

to, and pass in what we're calling what our name is.

So, in the case, we're gonna do something that's small screen.

So basically we have it in a side.

We don't want it to be in a side on our small little device.

So, we want to have that bump down below our main content or our article.

So we just reassign the width to a 100% and when

this spits out our compiled CSS this is what we get.

So again, it allows you to create more

modular [INAUDIBLE] architecture without doing a lot of work.

Alright so frameworks.

I love frameworks.

again, because I'm lazy and they make me be super efficient.

so, on the [INAUDIBLE] side we have compass.

Compass is basically a glorified CS3, CSS3 mix in framework.

Now, so if you remember back, I don't know, 100 slides ago, maybe 90.

We talked about the, the vendor prefix stuff.

Compass basically takes care of all of that for you.

So you don't have to write it all yourself.

And then on top of, of, of Sass, now we have Susy.

Susy is an unobtrusive rear framework for compass.

I use this all the time, totally dig it so instead

of, you know, writing a good framework where I have to

stick in a whole bunch of classes from my HTML, I

can have all that be transparent in my CSS, I prefer that.

Bourbon is a, is a wider, that means it's not ready

for Sass, their greater framework is called Neat, also very fantastic.

On the stylus side, you have Nib.

Now, nib does something really nifty with [INAUDIBLE] prefixes

and mix ins on the stylus side of the fence.

They make them all transparent.

You don't have to type include, you can just type in your typical border

radius rule, and it spits out all the [INAUDIBLE] prefixes that you would need.

So, it's when you talk about magical this is pretty magical, it's pretty neat.

And then Roots, is another library on top of

Stylus that's been around for a few months now, pretty robust.

I definitely dig it.

So, that's for Stylus, and then larger frameworks that Basically

have you conform to that how they would normally code something.

You have a foundation.

This is from Zerb.

Built on top of Sass.

Bootstrap, which is pretty popular, built on top of Less.

And then, I would be remiss if I didn't mention this.

But Hampton Catlin who is the, the inventor of Sass and Hamil.

Has been working really hard to improve Sass, so he's basically

taken the Ruby dependency from Sass and made it go away.

So he's had everything rerouted into a C level

library which is 200 times faster than, than normal.

Sass stuff, which is insane.

But, instead of having to install Ruby, you can install the

C level libraries on your computer whether it's Linux, Windows, or Mac.

And then you have wrappers.

You have wrappers for node, Ruby, PHP, .Net,

which is a much more efficient approach, I think.

So.

This is rockin' and rollin'.

They're a handful of things that will be coming out this weekend at Sass Comp.

Hampton and Chris and

Nathan, who are the core contributor to Sass and the folks who do Susie, Eric.

Their coming in to talk about some really crazy stuff.

It'll be a lot of fun, and yeah, that's all I have.

So, thanks for hanging out, listening to my Sass

stuff, if you wanna talk further about cupcakes, or

root beer or Spanish, or South America, or food

processors, look for the mustache and we can talk.

[SOUND]