 All right, I think we're about ready to get started Quick show hands who here? Uses sass or compass Awesome who uses like less Any stylus fans? Okay, cool. Who's to use just CSS? Hopefully we'll Not change your mind today necessarily, but uh show you the benefits of why we like sass or change your mind Yeah, we're not here to berate anybody And yada yada five. Yeah, there are free high fives to be had so So don't feel like you have to get everything down as far as taking notes if you want to you can download the slides now and follow along or go ahead and You know download the slides and then go see a better talk We'll have that link again at the end as well So today we're going to talk about sass and compass and Drupal And when we say sass and we say compass a lot of times we're using the two kind of interchangeably kind of like you might say like JavaScript when you're doing jQuery vice versa So hello, we like to own sass. Hope you will too or at least give it a shot I'm Nathan Smith. I do UX stuff at project 202. It has a K instead of a C in the name So you know it's cool and I used to work with Matt at HP cloud and So, yeah, so I work at HP cloud use our cloud. It's awesome Use their cloud. It's awesome. Oh wait. It's in private beta Use it when it's out of beta use it when it's out of beta. Yes, or come see me and maybe we can do something So sass and compass were made possible by These three people and a community of contributors. I just wanted to kind of put those faces up there to say that we Are power users at best, but these are the we're not worthy guys that wrote all of sass and compass So that just happened I don't know if you guys saw Anyways, I like to do kind of real-time presentations. That'll be the last mention of any of that So part one why sass? This is a key quote this was related to other browsers such as firefox Potentially planning on adopting the webkit vendor prefix because like everybody's only coding for webkit. We're getting left out So we should pretend we're webkit to get included And the key takeaway here is this line here a lot of people in Google say CSS is good for documents But not apps and he says no, it's bad for pretty much everything. It kind of sucks all around You don't have name spacing. You don't have you know a lot of things that you would want from a more robust program language Um, so I mean what what can we do about CSS? So we from the show of hands at the beginning of the talk, you know A lot of us have kind of dabbled in pre-processing CSS For those that are against it I would put to you that we use dynamic languages every day to process html and the PHP stands for PHP hypertext pre-processor, you know if we're pre-processing html all the time Then why is CSS kind of a hands-off language? So I kind of think of sass and CSS This is a great picture from a blog called thingsorganizedneatly.tumblr.com I love that they even took the dots off the bowl But basically sass allows you to keep things structured the way that you would In CSS throughout imports, but you don't because of all the extra html requests that that would incur Whereas sass munges them down in a one nice file and minifies it for you Here's another quote from Jeff Croft. He is actually a Django guy But he uses sass and his point was that nobody pre-processed or nobody writes just html anymore So we shouldn't impose that on ourselves for CSS Now you want to talk a little bit about these GUIs So yeah, so we've got different CSS pre-processors in the beginning I think we saw some hands for some last users some sass and compass users and stylus and nib has anybody ever heard of nib So it's sort of like compass But for stylus and stylus is the kind of a node and JavaScript Type deal for sass. It's another CSS pre-processor, but for node On utility or other ways to get to it Wow, that's awesome We're styling the page first to use the wheel with your we control the snapped into it Who's the double controllers? Right, you know what I'm talking for me GUIs Some people can beat Mario Kart using the wheel and that feels like the GUI to me where it's like You know like it's not a program, you know, everybody kind of poo-poo's on html and CSS is being like oh that's for designers It's easy. It's it can't scale, you know And then compass adds like a little bit more panache to it, you know, he's got the the nice outfit going on anyways So compass is a open-source CSS authoring framework Here's a lot of lists of why things are good about it Top one is experience cleaner markup without presentation of classes But I looked at you know when I was initially getting familiar with Drupal looked at the markup that came out in this like class Not logged in class node sidebars and like okay I think I can I can jive with that, you know using classes where they're needed not necessarily to exactly describe content So I don't really care about the first point of why designers love compass for the rest. I pretty much buy into So compass is the secret sauce of sass and it extends the functionality of sass by offering a Plug-in architecture. So the way that you can have a jQuery plug-in it does that for sass And you never have to type another Brenda vendor prefix, which is awesome Like I can't tell you how many hours that's probably saved me and I'm now supporting browsers I didn't even know I was supporting just because it it does it for me So I don't have to say oh, I forgot to test an opera. It just outputs that prefix for me And as we said we'll blur the lines using compass and sass kind interchangeably today and hope you'll forgive us for the Technicality, I mean if we can call CSS HTML 5 I think you can you know let that slide So basically compass is the sass like jQuery is a JavaScript and that's a gross oversimplification, but That's a good way to think of it. I'm gonna talk a little bit about How these are different equivalent so with sass you can have two different file types there is sass files and then sc ss files and Sass files you notice you have indentation. You don't have Semicolons you don't have the brackets on the outside that we're used to with CSS It looks a lot like Ruby right with your indentation or rails anyway, and then with scss files It looks a lot like CSS, but you have some other things in there besides Your normal CSS like you can see the include some of the magic that happens So there's kind of a different in field and it's just a designer-minded person and not like a rubious myself When I first heard about it I was like oh I'll probably love scss because I'm used to all the brackets and then I realized that's actually just Unnecessary typing so I I started heading more towards sass and ended up liking sass better and the way sass works is it's all Indentation based so the next time you don't indent it assumes that that's a new style selector So here we've got dot gross with family of comic sans and if we have something below that flush left Then that would be another selector. Yeah, and I kind of came about it the same way you did I was just too lazy to type all those extra characters yep so Everything we showed today will be in sass just because that's our preferred syntax But it works just as well for scss. So just imagine these extra curlies are there So the danger of sass versus scss is that there's the temptation to indent everything the way you would in the Dom so if you have a table with the T body inside it TR TD and a with class of special link You might be tempted to indent like this to keep it nice and clean Except your selectors become really really strong because the browser has to parse all that it's got to go right to left and look Oh, I found a special link. Is it a is it an actual a tag? Yes, is it in a TD is it in a TR is it in a T body is it in a table? Then if you ever want to override the clap the color of just that special link in a particular context You need to have that same amount of selectors to get down to it to match or beat the strength of that selector So maybe that's something someone here may not have known is Browsers parse CSS and classes and everything right to left not left to right So it starts with that right most item and works its way left So the the least items you can have on the left is kind of a nice thing So in these comments that are kind of hard to read. It was basically saying maybe all you needed is special link color blue you know maybe in your CSS files and I mean, even if you made a mix in yourself There's different syntax for like Moz is Moz border radius top left Webkit border top left radius There's no reason to remember all that junk because eventually it'll be standardized as probably let's just stick to Also gradients the stuff on the right is what you could type I guess if you wanted to You can see at the top. We've got experimental support for SVG is true Which will write as a SVG base 64 encoded string It'll write that to your CSS file So if there's a probably won't don't want to do this for every image But if there's an image that's going to be on a site so consistently that it might as well be in the CSS file itself You can do that with your gradients And again, you can see here's the all the fallbacks for the different browser vendor prefixes So here's a list of text editors and IDEs that support SAS and SCSS Our personal favorite I guess is sublime text sublime text too. Yeah. Yeah And if you don't use that you're doing it wrong. No, just kidding But you know, it's so this kind of answers the question of is it mainstream enough to care about or you know What what will my team say when I bring this back to them? Will they say that the text editor they use the IDE that they use doesn't support it chances are it probably does Did I have in there twice these GUIs? I don't think we talked about the GUIs yet. Oh, all right Sorry, I made you talk about GUIs. Okay, so these are GUIs. So Transplant what I said about Mario Kart to after this slide So anyways, these are apps that will compile live your SAS files into CSS So if you're not like a command line junkie who doesn't want to run like compass watch and some of the other command line Utilities, these are just GUIs you can install and run and it'll take care of the heavy lifting some of these You can do things like point to a directory and say watch it and when you modify your SAS or a CSS file CSS files are generated instantly so you can reload the page and compass app I think is like $7 scout is free. It's Adobe air based and runs on everything that runs Adobe air and the code kit is Mac only It's probably the most elegant of all of them and it also can do coffee script and less and stylus and all that it can do Coffee script. I'm not saying use coffee script, but it can do it, but personally we found that Workflow-wise it's easier to replicate your process if you just use command line and have a text file that has all your configs Saved that you can like source control or whatever So my initial impression of SAS when I heard about it from friends that do a lot of Ruby is like Okay, cool. If I'm ever on a Rails project tuck that away in my don't care file in my brain Then I was like, oh, okay, so it's not just for Rails for Ruby projects Tuck that you know in the other don't care file in my brain Then I was like, wait, wait a second You can use it in anything like you can have a flat HTML file that points to a CSS file that was compiled by SAS Okay, now we're getting somewhere and then now I've used SAS so much that when I'm in a project that Isn't Ruby based. I'm like, oh, no, what if I want to use it and it's not in Ruby And I thought maybe that wasn't possible But then we did it in Drupal with everything else we haven't be hosting say I want to run Ruby on the host also on that box also so I can So but that I think to call some stuff and just include things your own Sass-style add-on and it's all in PHP. So there is some potential there for maybe some way for themers Oh, did I go too far? Nope. All right. And it requires a old P which is a PHP port of Hamel But it's not really updated or used anymore Yeah, it needs right access to your theme now if anybody knows this from a security standpoint having your Drupal instance be able to Rewrite part of your code base is not really good for security. It's not something you really want to do That's why select all and say seven seven seven permissions. Yeah. Yeah, you don't want stuff like that So, you know designer. I don't know if that's bad or not sounds perfect to me, right? Exactly put that up on shared hosting see what happens But so you don't want that that's not good for that and despite its name It didn't do SCSS files. It's hard-coded to sass files Which for me isn't a problem, but for people like to do SCSS files. That's a problem Then there was the compass style sheet tool module compass, right? It actually uses Ruby to do all the heavy lifting so it pipes everything through to Ruby You got to have Ruby on the system. It's got to be accessible So it just kind of routes it through and that's not too bad And it can can you know you can tell like the develop module you can say, you know Refresh my theme and every page load and it can regenerate those files only then versus other times and that's not a bad thing Though the one problem is right your compass location. It needs to know where that is cross environment So if you develop language that if and that can be a kind of a pain to manage in addition to php is running Directly in in your host right? Yeah, so and then there there were there's going the hard-coded path Lee It's not a bad idea. I'd say out of all the ones you looked at that This was kind of our collective favorite. I think so Of biller it has some dependence project to Do sass in php so where sass is in ruby normally this takes the whole functionality Where is the back porting being done into php, right? Yeah? Yeah, so you're porting the functionality from one language to another the other language is always going to have a leg in time And then you use Drupal hooks to implement like namespaces to do all these different things So rather than have a compass add-on and this is where you can get into things like having a five-star hook that people can call inside of their sass files and The five-star module could supply it in theory that that's the example that was given to me, but So compass and bootstrap and foundation all these things that come with compass need to be Reimplemented entirely rewritten in php using our hook system So right now, that's not done. It's partially done a lot of the really cool stuff that you can do in compass isn't done But a handful of things are first that might exist still over here because they're entirely different change entirely different dependencies entirely different management And then you know you just put your sass and scss files in your your styles and it takes care of it And it stores the generated files in your public files folder So this is an interesting idea and it's really being heavily pushed right now But I don't know that it's something that I would want to latest bug fixes the latest and greatest that comes with the natural community of it so So I guess what we're trying to say is as in sass with Drupal to try to click Click try to stick closer to the metal and kind of escape the not inventive Drupal to ruby if you had a ruby server Right, it doesn't make a hole on us to port all the functionality of sass and compass from ruby to php So that's that way I guess to to because they would munch all the jubes all the faults together So here's an example of section in my info file This was for I did So See tools Just Just But So really, really take away all of those. This is what I had pre-assetting, I had a folder folder that I didn't want to use. So after adding sass, if we were all on the fflop.dji files, we just have one application that says so. Yeah, yeah, even if I forgot to turn it off. I still think this is worth doing, and we'll be able to do that in one second here and here. So come to watch and see how fast that's going to get fired by everything. Even if you do that, it should still use your full source performance. Why? Well, let's look at the next slide. The benefits of that are our cached bus, cached bus, whatever you say is it. Change change, random map, numeric map, file name. So the next time the page loads it will find a new css file that's changed. If you have a file tag that imports a file, older IE versions will treat that as a css file. So put it earlier and then go import your file. A file thing for development, it was never really intended for production. For beating old IE's limit on what you can do for development stuff. It was really never intended for production. It's probably powered by Drupal and I have tags with 18 imports and it makes me sad. So before I came here, because I'm a big performance person, I went and did a random sampling of sites of attendees, and about 50% of them don't have the preprocessing enabled for css. So if you don't, you should turn that on. It's super easy to do. You just go, well, this has the overlay. You just click configuration, and then in there there's a performance link, and you just say, yes, aggregate all this stuff. Production minified, I think that's from a module I have, but just make things as small as you can and munch them all together. So here's what it looks like with the compass output before Drupal has touched it, and this is what it looks like after. So here you can see clearly what's going on, right? Basically the only difference is that it's finding ..misc. Actually because I'm moving some of the system files into my theme directory to get that one HTTP request, I actually moved the .misc folder and deleted everything that wasn't an image. So I have the .misc folder with the little loading spinner and stuff that Drupal adds in my theme so that it can do this, find it, and then rewrite it to my theme path. So yeah, you now know all you need to know. Probably the best presentation we've ever heard of so far. Yeah, me too. As far as taking to the conference so far. Cool. So, oh wait, debugging, right? That's the one strong argument I've heard against SAS. Well, it turns all your parcels into one file, so how am I to know where my 5 pixel float bug is happening? Yeah, especially if it's all compressed down and you go to take a look at that. Do you install Windows on here? I don't know what happened. So anyways, point being, cryptic error messages are never helpful, right? Like a block that says your computer is busted, restart or something, you know? Because it's like, I can't look up this and then like, that's an end user, right? So that's what SAS would do is compress everything down into one file that is a human reading it, but this is no way to live as far as trying to debug things. Because it looks like it's smooth sailing, all right. So your stuff doesn't turn out right the first time? Yeah, it does. This is for other people, this section. So instead of having output style compressed, you want to say output style expanded, and then what that will give you is, oh man, it's kind of hard to read, but here it tells you line 102 on the reset, underscore reset.sas file is where this chunk of code is coming from. So it tells you exactly where to look. Yeah, so if you inspect this in like Firebug or WebKit Inspector, it will show you exactly the file you need to go and edit to fix what's wrong. Sure. So I always leave both of these lines in there, output style expanded, output style compressed. Actually, you can remove output style expanded and just comment out output style compressed and it will make it expanded by the nature of not having compressed past. So then you don't even have to worry about editing anything above like line nine. You can just do that all the same. These colon, that's the bowl, I believe, that's like a dollarable name, you know. It's easily the naysayers by saying you can get an easy stack trace of lines it came from. It's easier for files, because in my CSS files I don't know what line something happened, it didn't necessarily, but it's easy to find it in my sas files. Things that normally would make it through to a CSS file, sas catches ahead of time and says, hey, I'm not going to compile this because there was an error on line 15, you typed a semicolon and you didn't mean to or you have two curly braces or whatever it might be. So it's a little more strict on the compile. Yeah, so when you screw up it catches it. So just, if you're going to go with sas, decision, because if another developer is editing the CSS file and committing that back to source control and the next time you compile it just blows away his or her changes, that's not going to... They won't be happy with you. Yeah, so I would recommend if you are going to source control your CSS file, you do the minified one, that way it's obvious to the person who opens it like, I shouldn't know that, I can't read this, this makes no sense. Textmate bombs out because it's a one line file that's too long. So yeah, so you just want to be tweaking your .sas files or your .css files. So let's show some demos. I always think of... I always think of demos as like hit or miss, you know, like you got to pray to the demo gods and hope it all goes well. There's been offline demos today, so that won't happen. So any areas you see are entirely my own. So I'm waiting to see what explodes here, right? Because demos are always one of those scary things because it goes right when you're testing it, but then you get up on stage in front of a bunch of people. You got butterflies in your stomach and lunch is settling wrong. So I aliased a few things in Z-shell so I don't have to remember the deeply nested past to my theme. So we're going to say, Compass Watch, open TextMate, or sorry, Sublime Text, Recent Projects. And here we can just kind of check out what's going on with my CSS file. So there it is minified. Let's say I want to check out what's going on and be able to actually read that junk. Then I can just comment that out, hit Save. Let's say Compass Clean. That will delete all my CSS, which is kind of scary until you realize CSS is the compiled result of your actual code you care about, which is your SAS files. And then if I come back here, you can see all my stuff is readable. Let me change my theme real quick. So here you can see, here's all the Drupal default files. I have those listed first so that you can see with the style that's more specific. You can see down where did that come from. I can go back and easily figure that out. So that's pretty cool being able to see that and then not have to wonder or just find and replace snippets, or find snippets of text and search for them in a one line file. This is where the demo gods are going to strike by somehow making Mount Pro not work. Wow, seriously? I did this redesign like two years ago maybe, so forgive me for it not being responsive and stuff. I hope you won't hack my site in production or anything. So I just want to show you here where you would go to the performance tab. Wow, really? I just pulled down my database last night in the hotel room and made sure I had the latest stuff. Yeah, that's really weird. It's after it does the processing so you can see it changes the site's themes but I also wanted to show you guys it's a project called Get Serve. It's at GetServe.com. It's another cool way to play with SAS. If you want to mess around with SAS and show it to people but haven't gotten me okay to throw it in a project yet, then you can play around with it with Serve. So I just typed Serve. That gets my yes. Web server going. Then I can just go to localhost4000 and this is the site I threw together for my sister's wedding. Yeah, right. Yay, good big brother. It's tough finding stuff you can show it. I want you to show it. So here I have my Sublime project. This is Hamel just it's like shorthand for CSS or I mean for HTML and here you can see I've got import that type of thing. So I'm importing like a desktop file which imports a grid for desktop and that's kind of cool. I use it as an excuse to make her site all phone friendly for her friends on their phones and stuff. What's cool about Serve is if you just want to throw together a useful or just like a five to ten page site you want to have navigation state that gets class active and stuff all yourself. Once things are to your liking then you can say serve export so from where I'm at then let's say go to like desktop www.Bethany.com and that will actually write out all the files and so now everything is flat file HTML and you can just upload that to any old server. Yeah, so if you've ever heard of anything like Jekyll that's associated with GitHub because more cross-compiled languages that's an easy idea. If you hack it a little bit it'll do coffee script geek I couldn't just I'll be happy to demo code.