Very cool. 0:02 So yeah, my name is Bermon, and excited to be here today. 0:02 It's my first time in New York. 0:05 And it's pretty awesome so far. 0:07 I kind of dig it. 0:09 So, I work for a company in Charlotte called Cardinal Solutions. 0:11 And I'm their UX lead in the North Carolina region. 0:14 And I run a team of, of user 0:18 experience designers, [INAUDIBLE] designers, and front end developers. 0:20 And so, I get to tinker with a lot of things. 0:23 And I think it's a lot of fun. 0:25 So, in the Charlotte community I run the New Experience Group, 0:26 The Front end Developer Group, and I think he actually uses Sass. 0:29 Who's going to Sass comp this weekend? 0:34 I guess is a better question. 0:35 See that one hand, two hands, couple hands. 0:37 So, I work with the Sass project a bit, with Gina and Michael who spoke yesterday. 0:40 Gina's speaking later on this afternoon. 0:45 Doing the re-brand of, of Sass and it's website, and it's documentation. 0:47 Making things a bit more friendly. 0:51 So, I do love Sass. 0:53 And most recently about a month ago, I ran a conference 0:54 in Charlotte called [INAUDIBLE] conference and I love cupcakes so much. 0:59 They are my most favorite things to eat, so if anybody knows a really good 1:04 cupcake place here in New York, let me know because I would love to go by. 1:09 I also love root beer, it's the best thing ever. 1:12 If there's a place on, with root beer on tap, definitely let me know as well. 1:15 And, if I can combine the two, and have kind of like 1:19 these root beer float cupcakes, then that would be even more amazing. 1:22 And I also love travelling. 1:26 My wife is from Ecuador, South America, we enjoy going down there. 1:28 Specifically to a city called Quinka. 1:31 It is this really fantastic town. 1:33 Nestled in between the Andes Mountains, and it's like 65 degrees, all year round. 1:36 And the food is amazing, everybody speaks Spanish. 1:40 And it's lets me practice, so I totally dig it. 1:42 And you're going to follow me on Twitter as Bermon Painter, and we can chat. 1:46 So, today we're going to talk about pre processors, 1:50 and we're going to compare stylus Less, and Sass. 1:52 They're all fantastic they all have a fantastic feature 1:57 set, and I think you're really gonna enjoy it. 1:59 So, we're gonna talk about the history of 2:02 CSS, pre processes in general, kinda what they are. 2:04 How to get them set up. 2:07 The features, the features today are 2:08 divided up into beginner, intermediate, and advanced. 2:11 And so, you can kind of build on base 2:14 features, and progressively move forward into more advanced topics. 2:16 And, then we'll talk about some of the frameworks that exist. 2:20 To make our jobs easier. 2:23 As a front end developer, I'm kind of lazy, so if frameworks can do 2:24 things for me, I will definitely let them do things for me, and not complain. 2:29 So we're gonna do a history of CSS really quickly. 2:35 So way back in the day, and this is kind of Bermon's version of the history of CSS. 2:39 Way back in the early days of the web, 2:44 CSS acutally didn't exist, and I've been working on 2:47 the web now for I don't know, ten, 12, 2:50 13 years, I've kind of lost track and stopped counting. 2:55 But I originally got into the web, many years ago when I was in high school. 2:57 Probably 16, 17. 3:01 I had joined an online gaming guild, called the imperial rulers of destiny. 3:03 And we were a Star Craft and Diablo gaming guild. 3:09 Anyone play Star Craft or Diablo back in the day? 3:12 Yeah! 3:14 I was killermoo online. 3:15 And the guild had a website, we'll they 3:17 had two websites, one on tripod one on geocities. 3:20 They were glorious and that was kind of 3:23 my first foray into tinkering with dream weaver, 3:25 poking around into lots of tables and spacer 3:28 gifs [COUGH] and just really really horrible stuff. 3:33 That I'm really glad we've moved away from. 3:37 And, I remember when CSS first came out. 3:40 I think my brother was taking a class in college. 3:42 And [INAUDIBLE] I think you should try this CSS thing, it's pretty neat. 3:44 And, the only thing really understood how to do was 3:47 to had like this class underline rule, no underline rule. 3:49 That would remove underlines from all the links. 3:53 Really horrible idea, never do that. 3:55 But that was my first experience with CSS. 3:57 And as the web kind of progressed, CSS became a bit more complex. 3:59 We had basically a single CSS file, and as the web progressed more, we added more 4:04 CSS like a base, a something for layout, something for typography, whatever it was. 4:10 I think we should do a wide array of CSS files 4:15 that we use to create a website and then I was nice. 4:18 And they provided initial comments, so we can sort 4:22 of get out ibugs and into their specific files. 4:25 And, we had some more files we could add onto it. 4:29 And that was performance impact. 4:32 It made things a little slower, not quite as elegant. 4:34 Now, CSS had this really nice feature called an Import Directive. 4:38 And, what that allowed us to do is to take those external files, import 4:43 them into a, a base CSS file, and then to serve a single file. 4:46 But, it still didn't help performance, cuz it was still going 4:51 to put out another file, which wasn't really all that fun. 4:54 HTML5 Boilerplate kind of came out and this is 4:58 something that they kind of created to be able to, 5:00 instead of wrapping external style sheets in conditional comments, 5:02 we could wrap the HTML tags, stick on some classes. 5:06 That cleaned things up a little bit, but we've still got all these extra files. 5:09 So, that kind of leads us into pre processors, and 5:12 some of the really amazing things that they can do. 5:16 So, what is a pre processor? 5:19 I think it's really magical. 5:21 And they do so many amazing things, and he's super scary up there. 5:23 But basically what a preprocessor allows us to do, is take a series of 5:27 files, preprocessed files, and in this case 5:32 this is the, the Sassy Syntax, or Sas. 5:34 It allows us to take these files that a browser doesn't understand. 5:37 Compile those into something the browser can understand. 5:41 So, you can take all these files, and compile them into one. 5:44 Something that we can serve through a browser, 5:48 and that in a nutshell is what pre-processor is. 5:50 And, it gives us all the nifty things that I'm going to just brain dump on you today. 5:53 So, there are three primary processors that exist right now. 5:58 One is Stylus, built on Node. 6:02 We also have less, which is fairly popular, also built on Node. 6:05 And, then we have Sass, which is built on top of Ruby, and I love them all. 6:08 I think they're all fantastic. 6:13 So. 6:15 One caveat I think is important to keep in mind, is that if you 6:17 write crappy CSS right now, and use a preprocessor, it's not a magic bullet. 6:20 It's not gonna make your CSS amazingly better. 6:25 It's still going to suck or it could suck more. 6:28 Or it could suck more. 6:30 It depends on how you write your CSS. 6:31 So, learn to write good CSS. 6:34 Regardless of what you're doing, there are a 6:36 handful of resources out there that will help. 6:38 But, let's get started. 6:41 So, the, the quickest way I think to get up, 6:43 and running with a preprocessor is to use a GUI App. 6:45 They're nice, especially for designer type folks. 6:49 One of the most popular I think is Code Kit. 6:53 It is not free but it is amazing. 6:56 It basically has pre-processors for everything, HTML, CSS, and JavaScript. 6:58 It'll [INAUDIBLE] it'll minify, it'll [INAUDIBLE] 7:02 JavaScript or GSLint and compress other images. 7:05 Really handy tool. 7:08 This is MAC only. 7:10 On the windows size you have prepros which basically does the same thing. 7:11 You also have live reload, which works across platform. 7:16 Compass app as well, also works across platform, but it is Sass and Compass only. 7:21 And then Scout, is the Windows version of that, basically. 7:26 And, gooey stuff aside, I really love code pin. 7:31 It is a fantastic tool. 7:37 It's basically like the, the dribble for foreign developers. 7:40 So, it allows you to go in and tink without installing 7:44 software, buying software with, with any preprocessor, and see its output. 7:45 It's a fantastic tool. 7:50 Now the second option, is you can use the command line. 7:52 Now personally, this is the way that I use things. 7:55 Because I hate running different applications, and I personally 7:57 think the command line's the best GUI out there. 8:01 So, if I was going to install things 8:03 in Sass, Less, or Stylus, there's a dependency. 8:07 If you're on a Mac well, if you install Less 8:10 or if you install Sass, you have a Ruby dependency. 8:14 So, GM has a package management. 8:17 I called gems. 8:19 Gem install Sass. 8:20 It does it's stuff. 8:21 Less and Stylus they run on Nodes so you have to install some other things. 8:24 You have to install Node and MPM, and then get up and running. 8:28 So, it takes a little bit more effort but basically the same result. 8:32 Basically you're taking. 8:37 A preprocess files, and processing those, or compiling those into CSS files. 8:38 Now, the reason I say it, even mention the 8:44 command line, is that you never what can happen. 8:47 If you don't have something set up and you need to get 8:51 your CSS processed, or your pre processed stuff processed in your normal CSS. 8:54 Your developer could run off, you could be 8:59 eaten by a dinosaur that spits stuff at him. 9:03 And, then you can be like alright, I got this. 9:05 It's just eunuchs. 9:07 I can totally use command line, and you can 9:08 save your team from velociraptors and it's all great. 9:11 Now, if you're a designer or if you're not familiar with the command line, John Long. 9:14 Has a really good article on, using the command line as a designer. 9:18 I probably day to day maybe use ten to 9:23 15 commands within the command line to do my work. 9:25 And that, that's with get and preprocessors and various odds and ends. 9:28 There's not to much to it. 9:31 You can totally destroy things if you want to, but 9:32 you have to try really hard to make things explode. 9:35 Now, before we get into the actual features, there are a handful of 9:38 ways that you can process or compile your CSS and Less, Stylus, or Sass. 9:41 The most common, I think, is local. 9:49 So, you do this on your local machine, 9:51 either with a GUI application or the command line. 9:54 The second way to do this, you can do it on deploy. 9:59 This is something that a developer probably take care of for you, 10:01 [COUGH] or if you're a developer this is probably what you might use. 10:04 And so for you using an application stack, either a Node or in Rubby or 10:06 even PHP, you might not want to keep all these static CSS files on the system. 10:10 You want to keep your. 10:16 Your native or your, your preprocessed files. 10:17 So, you don't wanna compile everything to a static 10:20 asset, before you send it out to the server. 10:22 So, you do that on Deploy, or you can do it On Request. 10:24 So, if you have everything living on the server, you 10:28 can have the server compile your assets into native CSS files. 10:30 Not the best way to do it. 10:37 So you, you kinda have to do this, 10:38 this two step process where you compile, and cache. 10:40 Otherwise, you're gonna be compiling it at 10:44 every request which isn't the smartest idea. 10:45 And, and then you get on the client, but you 10:47 should never be on the client, that's a whole new idea. 10:50 This is something that Less allows you to do, their, their Less JS file. 10:52 That basically allows you to serve the browser your Less files, 10:56 and then the JavaScript does the compilation stage on the client. 11:01 Not very efficient. 11:04 Not a good idea in production. 11:06 So, just ignore that one. 11:08 But, it exists if you wanted to do it. 11:09 But, just don't. 11:12 so, syntax. 11:13 Now. 11:14 Sass, way back in the day, only had a single Syntax. 11:16 It was called the Sass Syntax. 11:19 Which is actually what you see here behind my head. 11:21 It was fairly terse: no curly braces, no semicolons. 11:24 And later on they came out with the Sassy syntax, or the SCSS syntax. 11:28 Which looks just like normal CSS. 11:33 Less follows the same syntax. 11:35 Stylus has two. 11:38 They have the normal CSS looking syntax, and then they have 11:40 the [INAUDIBLE] looking syntax, no colons, no semicolons, no curly braces. 11:44 You just kinda type and things happen. 11:49 So, the best way or the easiest way to, to take a, a normal CSS file 11:54 this is one of the things that I 12:00 like about preprocessors especially all of them now. 12:01 Is you can take existing CSS files, change 12:04 the file extension and you have a preprocess file. 12:07 So you don't have to change everything all at 12:10 once, you can kind of do bits and pieces. 12:12 And I move forward from there. 12:14 So, the the file extensions for Sass are either S-A-S-S, or S-E-S-S. 12:16 For Less, it's just LESS. 12:21 And then for Stylus, it's just S-T-Y-L. 12:22 That's all you really have to do. 12:25 Now, one of the things I really enjoy about preprocessors is 12:29 that it allows me as a developer to be more efficient. 12:33 And, one of the basic features is the ability to have variables. 12:36 Now, I love this. 12:40 And, Nicole Sullivan tells a story about Facebook, and her 12:42 going in to help make Facebook's frame architecture, much more efficient. 12:45 So, what tends to happen I think, 12:51 especially, as we're tinkering on the web is. 12:52 When we're trying to,to, nail down colors, we're just like 12:56 do a screenshot or do a nice little color picker. 12:59 And like that's close enough let's grab that color, that's what I'm going to use. 13:02 And the case of Facebook, they had such a crap ton Facebook 13:07 blues, basically threw out their site and because of that very reason. 13:10 So, what [INAUDIBLE] allow you to do. 13:14 Is to take values that you would 13:16 use consistently, and apply those throughout your site. 13:18 So, in this example, we have basically, what we're using, colors. 13:22 And we're doing, like, site width, you can do font stacks. 13:26 Basically, any value you can assign to something to use later. 13:29 And it allows us to be efficient. 13:32 So, we can declare it one place. 13:35 And use it to route our CSS. 13:36 Sass, the way the Sass calls a variable is with a 13:39 dollar sign, Less is with an ampersand, Stylus doesn't really care. 13:42 You just type something, and you have a variable. 13:46 It's really weird, but very awesome. 13:50 If you hate typing and you can't type like me. 13:52 And this is what it spits out. 13:55 So, basically takes whatever you assign to those variables, 13:56 and where we use them, it fits in the value. 13:59 [COUGH] Now the second thing that I really wish CSS allowed 14:02 me to be able to do is to nest my values. 14:07 So this is a really simple example of. 14:10 A navigation. 14:12 basic, basic Nav element with UL, LI, and some links inside. 14:14 And it's fairly redundant because, I'm scoping everything 14:18 to Nav and then scoping it to the 14:22 UL, and then to the LI and then to the a and then doing my rules. 14:24 Now I'm very efficient. 14:28 Kind of a pain to type. 14:29 So, what preprocess allows us to do is nest that. 14:30 And that may look kind of messy. 14:35 There aren't many, many rules to it, but it basically 14:36 allows me to, to nest things inside of my curly braces. 14:39 so, visually they make more sense, only typing Nav one time. 14:43 And this is what it spits out, just like what we started out with. 14:49 Now one thing to keep 14:52 keep an eye on is specificity. 14:56 Nesting is a little bit addictive. 14:59 A lot of fun, but you can go too deep. 15:01 So, tip of rule of thumb, is any more than three 15:05 selectors, probably too far so bring it back a little bit. 15:07 So, we can take that same example, make it a little 15:11 more elegant, a little more [INAUDIBLE] and spit out something like that. 15:14 And so we're not targeting, basically we are not going all 15:17 the way down the DOM tree to get all our stuff. 15:19 We're only targeting what we have to target to get the styles that we need. 15:21 Now another thing that all three have, they have the, this 15:25 idea of a parent selector and they do that with an ampersand. 15:28 So in this example we have an L element and we want something just specific to IE. 15:34 So, much earlier we talked about the HTML 15:39 with the i classes inside the conditional comment. 15:42 So, what is this allows us to do is, we can nest but we can also use our parent 15:46 selector, and what that ends up doing is allows us to go outside of our scope. 15:51 And, assign the higher class which will be .i e seven which is up on our body 15:58 our map somewhere else, as a as a descendant and what it does 16:03 where ever that ampersand appears it goes up in our our rule to find Nav. 16:08 So, basically injects Nav where the ampersand 16:13 is and this is what it spits out. 16:15 So, what it allows us to do is keep light sections of Code chunked together, so, 16:19 you don't have rules that are changing specific 16:23 sections of CSS, all over our CSS files. 16:27 So, that helps us keep things nice and modular. 16:30 All right. 16:35 Now we talked about import as well. 16:36 So import, good idea, but it didn't really work that well in native CSS. 16:38 So, what all of the processes have done, 16:44 is they've basically taken over that import directive. 16:47 So, that allows us to take all these extra files, and 16:49 still serve a single file, or a series of small files. 16:53 Into something like this. 16:59 So basically we take our import, this is how it looks. 17:01 The progressors were smart enough to know that, 17:03 you don't have to put on the file extensions. 17:05 You just type the name, and tell it you want to import it. 17:07 And what it does is it, is it goes out 17:09 and grabs those files, and concades everything into a single file. 17:10 So, when it spits out your native CSS. 17:15 It can condense everything together into, to that one file. 17:18 And it is fantastic. 17:20 So, those are, basic, preprocessor things. 17:23 Now intermediate, this is where Lazy Bermon really, really likes his 17:27 stuff, because I really hate, popping all the vendor prefixes in. 17:31 There are tools out there that make this a little bit easier. 17:35 But there's a concept of mixins, and they do a fantastic job doing vendor prefixes. 17:38 So, we have a box, for example, and our box we want to 17:45 give it rounded corners because that's kind of the cool thing to do. 17:50 Not so much any more, I guess now I would want to make things flat. 17:53 But, we'll stick with border radius. 17:55 So, we have to type that five times and every time we're 17:58 gonna change that value we have to change the value five times. 18:00 So, what the mixin's basically are, is they're these chunks of CSS 18:04 Code that allow us to be more efficient in how we write things. 18:09 So, it kinda makes it in Sass, you just do ampersand mix in. 18:14 And we give the mix in a name. 18:17 We're going to call this mix in border radius. 18:19 And this border radius has some parentheses. 18:21 And you notice the dollar sign. 18:26 That's basically a variable or parameter that we can pass in. 18:27 And then inside our mix in, we're gonna write our 18:31 CSS Code that we want to use throughout the site. 18:33 Now, instead of us hardcoding in a value, we're putting our variable in there. 18:37 So, then the color mix in, we have a box 18:41 class, and we're just going to go alright, mister box, 18:44 we want to include a border radius, and we want 18:47 that border radius to have a radius of five pixels. 18:50 Less does something very similar. 18:54 And instead of the ampersand, though, you're just basically writing a 18:56 class, adding on some perens, doing a Less version of a variable. 18:59 Structurally it's all the same. 19:03 When you call it, you don't have to do include, you just do class border radius. 19:05 And the pass innervalue. 19:10 Stylus, they just don't really care. 19:13 You just type border radius, did some prints, stick in a value. 19:15 Do the same thing in a box. 19:19 Again, [INAUDIBLE] that crazy stuff. 19:21 Just type in border radius and the value and 19:23 it spits out, kind of what you would expect. 19:26 Now, one of the nifty things that Stylus does. 19:29 Is they have this concept of transparent mix ins. 19:32 So, I can just do order radius and do empty prints with no 19:35 parameter, and then, inside of my mix in, I can just type in arguments. 19:39 So, basically, anything I type inside the prins, 19:43 it'll stick in arguments, which is pretty nice. 19:47 And then, we'll just call it. 19:48 And this is what it spits out. 19:51 So, this is really fantastic for all these crazy C-S-S 19:53 Remix-ins and inner proofing stuff that we have to maintain. 19:57 And so in essence I can use one of these mix-ins so any time 20:00 you know, if the Spec updates and you know MS and Mahs and Alkra. 20:06 All those inter prefixes go away. 20:12 I can update that single mix in. 20:15 And it'll play everywhere I use it in my CSS. 20:16 So, it's super efficient, and easy to maintain. 20:18 Alright. 20:23 So the next thing is, there's an extend principle. 20:23 Now, previously, SASS had this, and Stylus added it. 20:26 And about, the latest version of Less, also added this extend concept. 20:29 One of the problems with, with mix ins is that they're, they may look nice and 20:36 efficient as a you know, a pre process CSS, but the output is kinda redundant. 20:43 Some things don't look natural in some cases. 20:51 So, what extend allows us to do, is 20:56 basically extend a class, and use that class elsewhere. 20:58 But, instead of spitting out redundant code 21:02 it does [INAUDIBLE] CSS rules, which is a 21:05 bit more natural, and I'll show you an example of that here in a second. 21:07 So, we're gonna create a border class. 21:10 And inside that borders class, we're gonna have borders and some padding and 21:13 then we want to extend that class on our paragraph in our list. 21:17 And have them be borders. 21:22 So, you can basically stand any class 21:24 anywhere you don't have to do anything special. 21:28 You just call like you would normal class, and you can send that anywhere CSS. 21:31 So to extend, you're just going to write @extend.waters. 21:35 Or whatever the classroom is. 21:38 Same thing with Stylus. 21:40 It follows. 21:41 It actually wants you to use extend. 21:42 Which probably make sense. 21:45 And then this is what it spits out. 21:46 So, it gives us a nice, [COUGH] compact [INAUDIBLE] limited CSS rules. 21:49 Up at the top, and anything else that is not using those rules is down below. 21:55 Now, one of the issues I think with the extend is that if by chance we weren't 22:01 using our borders class and you were in HTML, 22:08 we're still spitting out the class in our CSS. 22:12 So, Sass came up with this, this extra 22:15 client set called Placeholder Directive that basically allows us 22:17 to create these transparent classes, or place holders 22:20 of CSS, goodies that we can apply later on. 22:24 So issues on the ampersand, so instead 22:27 of extending a class we're extending ampersand borders. 22:29 And it spits out all the same stuff without that extra class. 22:33 Now some advanced stuff. 22:37 Now as this, this is kind of where the, the pre processors 22:40 start to divide a bit in the things that they can do. 22:43 So functions, are basically used to calculate. 22:47 They do Math. 22:50 I suck at Math. 22:52 Functions make me doing Math much easier. 22:53 so, one of the most popular ways a function is used 22:57 to create really simply root systems, or really complex root systems. 23:00 So, what I wanna do is I wanna turn this very 23:03 static grid into something that we can reuse over and over again. 23:06 Now, these are are static widths. 23:11 We want to convert them into something percentage 23:14 based, so we can have a more fluid layout. 23:16 So, we have a container with a width of 960. 23:19 We have an article and an aside. 23:20 It's a typical article/aside layout. 23:22 Big article, tiny aside. 23:24 And we can do something like this. 23:27 So, we can combine our variables with some functions, and we can use those. 23:29 So, this is how Sass would do it. 23:34 So we have a, a grid columns, so basically we're gonna do a 12 column grid 23:36 system, and we're gonna base it off of 23:40 960, we'll convert everything through, to per, to percentages. 23:42 So we create our function, @function. 23:45 We're gonna give it a name. 23:47 We're gonna call it, calculate column width. 23:49 Again we have some params we pass in parameter. 23:51 We're gonna call this one columns, so we're gonna calculate our column 23:55 width based off of the number of columns we put in there. 23:58 And then, we return whatever the calculation is, that's what it 24:02 is, I'm not going to say it because that meh stuff. 24:06 So, we have our container, we're going to set 24:10 our container to 100%, so it will even flow with 24:12 the width of the browser, and then for our 24:14 article we have our width and width on the aside. 24:17 In order to call a function. 24:22 We just call the function name. 24:25 Calculate column width and out of, out of those 12 columns, 24:27 we put in the number that we wanted to take up. 24:31 So, basically you want, we have 12 columns. 24:33 Robert's was gonna take up eight, and our side will take up four. 24:36 This is how it looks in Less. 24:42 Pretty similar. 24:44 Does basically the same thing. 24:45 This is Stylus, much more terse. 24:47 But same concept. 24:51 And then this is what it spits out. 24:53 So, it runs that function and spits out a 24:54 percentage width for both [COUGH] with decimal places whatever, whatever. 24:58 Not so pretty for us, but the browser doesn't care. 25:04 Another thing that I really like is the 25:09 color functions that exist in all the preprocessors. 25:11 [COUGH] I work a lot with, with, [INAUDIBLE] themes. 25:15 So it's very handy for me to be able to pass in a single color of IU or 25:18 shades of color IUs and create a very robust 25:21 theme based off a sing, series of single values. 25:25 So, you can lighten you can darken, you can adjust the hue, you can saturate, 25:29 desaturate, you can convert everything to gray scale, 25:35 you can decomplement colors, you can revert things. 25:39 And Sass just has a crap ton of that this is for like half of what Sass has. 25:43 Less and Stylus, that's pretty much all they have. 25:48 So this is a really good way to build a [INAUDIBLE] framework on top of your CSS. 25:52 So, this is kind of how they work. 25:58 So let's say I have a series of links, I'm going 26:00 to collor them blue, because that's the collor links are I guess. 26:02 And, whenever you hover over them, I want them to be just a little bit darker. 26:05 So, I can darken my blue 10%, do that across the board, 26:10 and it spits out the appropriate hex value, which is pretty handy. 26:14 Now, this is where the divide really starts to happen. 26:20 They all have various control directives where. 26:25 A basic logic statement so, Sass has; if, else if, else, then, for, while. 26:27 Less your stuck with, when. 26:32 Then Stylus goes; if, else if; else, unless. 26:34 And you can do some really nifty things, having that logic, 26:38 one of the things are in this example creating a button. 26:45 Now, aesthetics constantly change. 26:50 Ten years ago everything was nice and glossy, and had 26:52 that apple aesthetic, and then we went to just gradients. 26:56 And now, now we're all flat, which is all silly, but aesthetics change. 27:01 So, what I can do in my, my Sass, or basically any, any 27:06 of the free processors, is I can create a mix in for my buttons. 27:12 And in my buttons, I'm gonna pass in two parameters. 27:15 I want to pass in a color and I wanna pass in a type. 27:18 So, I'm predefining three different types. 27:21 Flat, gradient, or glossy. 27:23 And I can use some if else statements to spit out 27:25 the appropriate CSS depending on how I use this mix in. 27:28 So in this case, I'm going to do green glossy button. 27:31 And what it will do, it runs through the 27:36 logic and finds the else if for my glossy type. 27:36 And that is gonna spin out a linear gradient with 27:43 a very hard gradient. 27:48 So, the [INAUDIBLE] is gonna have a hard edge. 27:49 This is how you do in Less. 27:53 Now, Less, remember, you have a while statement, 27:54 and or which than, which is kind of weird. 27:57 For me, I think. 28:01 So, you basically have to define your mix in three times, but you have that added 28:03 when, so whatever type equals whatever you're trying 28:08 to define, in our case flat gradient and glossy. 28:10 It spits out the appropriate CSS, and then you can call 28:13 it down here below, so I call buttons green and glossy. 28:16 And it spits out the necessary C, CSS. 28:20 And Stylus, looks just like the, the Sass version with out all the extra stuff. 28:22 That's what you get. 28:28 So, little bit extra work, but for nice modularity and ease of use. 28:30 Now that, that's a super simple example. 28:36 You can do. 28:39 Lots of crazy things. 28:40 If anybody ever has a chance to peek 28:44 under the hood of, SensoTouch their mobile framework. 28:45 Everything they do is in Sass. 28:50 They do some crazy, robust stuff in their, their Sass files. 28:51 Worth digging into and seeing all the craziness that they're doing. 28:55 And this is where Sass kind of steps ahead. 29:00 So, Sass had basic control directive, so this is a four loop. 29:03 So basically it allows me to generate, a lot 29:07 of CSS with only a very small section of code. 29:10 So I can, I can go from I, and I want to generate. 29:14 A series of classes from one to five pixels. 29:20 So, I'm setting border widths and I can interpolate which 29:22 is what the, the hatch and the colored [INAUDIBLE] do. 29:26 And this is what it spits out. 29:30 So, I can go border one, two, three, four from that. 29:33 Another thing that's kind of similar is each. 29:38 So in Sass, you can basically assign an array to a series of variables, 29:41 and we're gonna do our array as 29:46 happy, sad, excited, mustached, because that's pretty awesome. 29:48 And then I can use an each loop, so for 29:52 each emotion in emotions, which is our array up top. 29:54 We're wantin' to do feeling, and whatever our emotion is. 29:57 So we're basically generating a handful of class names, and then 30:01 we also wanna generate an image that goes along with it. 30:03 So, for every emotion we have an image and we just wanna use interpolation to 30:07 to dump in whatever we have in our array, as our class and as our background. 30:11 And that's what you get. 30:17 [BLANK_AUDIO] 30:18 So, it's pretty handy. 30:19 Now I use this, on the [INAUDIBLE] conference website. 30:21 As a little [INAUDIBLE] case I had, of 51 speakers. 30:24 And each one of those speakers had, had an image, and one 30:28 of the images is the background image, so I could, compress them down. 30:32 I'm kinda using the poor man's. 30:35 Response image technique where you double size, and save 30:36 the mat as really, lossy looking JPEGS and then 30:40 compressed them back down, and then it works in 30:44 retina and non retina devices with a small file size. 30:46 So, I didn't create 51 of those. 30:50 I didn't want to write. 30:52 51 CSS rules with all the background stuff for all my speakers. 30:53 So, I use that I basically assign all my speakers to an array. 30:57 And use four or five lines of Sass Code to spit out like 150 lines of stuff. 31:00 Whatever that ends up being. 31:07 I'm lazy, makes me efficient. 31:09 Another thing that that is really nice, is the ability 31:13 to work with media quarries responses, responsive design isn't new anymore. 31:16 It's progressing and improving and, it's being used everywhere. 31:21 So Sass, allows us to use media queries with much more ease. 31:26 So in our case, we can assign simple break 31:32 points to variables, so we have small, medium, large. 31:36 And you can do this as many times as you want. 31:39 And then we can use those media queries, 31:41 all those variables inside our CSS, our Sass file. 31:42 And, so we can nest those again. 31:47 This allows us to chunk, like sections of code together. 31:49 So, we can maintain the things easier, and find necessary CSS. 31:53 So, that's what we get. 31:57 This is the last version. 31:59 Looks pretty much the same. 32:01 Stylus version, and then that's what spits out. 32:03 So it makes maintaining that a whole lot easier. 32:08 Now, one of the things that Sass has, that Stylus and Less don't have 32:11 yet, I'm assuming they'll add it some time, is an idea of a content directive. 32:14 So it allows us to create a mix in, but it allows us to 32:19 pass in a series of rules inside the mix in, by using our content directive. 32:22 So, you will notice it's a typical mix in. 32:27 We are going to create a mix in to 32:29 create, make using those media craze a little easier, and 32:30 we are going to call this mix in respond to and we are going to respond to a name. 32:34 So in this case, we have small screen, and large screen as our names. 32:37 And then we have our media query for each one. 32:41 For our small screen, for our large screen, and then the content. 32:44 So, use case is down here below. 32:47 So we include our media query, which is a respond 32:50 to, and pass in what we're calling what our name is. 32:52 So, in the case, we're gonna do something that's small screen. 32:56 So basically we have it in a side. 32:58 We don't want it to be in a side on our small little device. 33:00 So, we want to have that bump down below our main content or our article. 33:03 So we just reassign the width to a 100% and when 33:07 this spits out our compiled CSS this is what we get. 33:10 So again, it allows you to create more 33:16 modular [INAUDIBLE] architecture without doing a lot of work. 33:18 Alright so frameworks. 33:24 I love frameworks. 33:25 again, because I'm lazy and they make me be super efficient. 33:27 so, on the [INAUDIBLE] side we have compass. 33:30 Compass is basically a glorified CS3, CSS3 mix in framework. 33:33 Now, so if you remember back, I don't know, 100 slides ago, maybe 90. 33:37 We talked about the, the vendor prefix stuff. 33:42 Compass basically takes care of all of that for you. 33:45 So you don't have to write it all yourself. 33:48 And then on top of, of, of Sass, now we have Susy. 33:51 Susy is an unobtrusive rear framework for compass. 33:55 I use this all the time, totally dig it so instead 33:59 of, you know, writing a good framework where I have to 34:02 stick in a whole bunch of classes from my HTML, I 34:05 can have all that be transparent in my CSS, I prefer that. 34:08 Bourbon is a, is a wider, that means it's not ready 34:12 for Sass, their greater framework is called Neat, also very fantastic. 34:15 On the stylus side, you have Nib. 34:21 Now, nib does something really nifty with [INAUDIBLE] prefixes 34:23 and mix ins on the stylus side of the fence. 34:27 They make them all transparent. 34:30 You don't have to type include, you can just type in your typical border 34:32 radius rule, and it spits out all the [INAUDIBLE] prefixes that you would need. 34:35 So, it's when you talk about magical this is pretty magical, it's pretty neat. 34:40 And then Roots, is another library on top of 34:46 Stylus that's been around for a few months now, pretty robust. 34:51 I definitely dig it. 34:57 So, that's for Stylus, and then larger frameworks that Basically 34:59 have you conform to that how they would normally code something. 35:05 You have a foundation. 35:07 This is from Zerb. 35:07 Built on top of Sass. 35:09 Bootstrap, which is pretty popular, built on top of Less. 35:10 And then, I would be remiss if I didn't mention this. 35:16 But Hampton Catlin who is the, the inventor of Sass and Hamil. 35:19 Has been working really hard to improve Sass, so he's basically 35:24 taken the Ruby dependency from Sass and made it go away. 35:31 So he's had everything rerouted into a C level 35:35 library which is 200 times faster than, than normal. 35:37 Sass stuff, which is insane. 35:42 But, instead of having to install Ruby, you can install the 35:46 C level libraries on your computer whether it's Linux, Windows, or Mac. 35:48 And then you have wrappers. 35:52 You have wrappers for node, Ruby, PHP, .Net, 35:53 which is a much more efficient approach, I think. 35:59 So. 36:02 This is rockin' and rollin'. 36:03 They're a handful of things that will be coming out this weekend at Sass Comp. 36:05 Hampton and Chris and 36:09 Nathan, who are the core contributor to Sass and the folks who do Susie, Eric. 36:16 Their coming in to talk about some really crazy stuff. 36:22 It'll be a lot of fun, and yeah, that's all I have. 36:25 So, thanks for hanging out, listening to my Sass 36:29 stuff, if you wanna talk further about cupcakes, or 36:32 root beer or Spanish, or South America, or food 36:36 processors, look for the mustache and we can talk. 36:39 [SOUND] 36:42