 Today, we're going to talk about CSS for Clark Kent, SAS for Superman. Let me tell you a little bit about myself. This presentation is going to be a little bit about the journey of me discovering SAS. But I'm known as John Ubin. My actual last name is Wilkins, but almost everybody thinks my last name is Albin. Totally fine. I get all the time. Not a problem. I am Drupal.org user 11297. I've been using Drupal for over eight years now. And you can find me basically everywhere as John Albin, Twitter, anyplace like that, IRC, you'll find me there. I'm actually writing a book for O'Reilly on SAS Encompass. The presentation today is not a pitch for you to buy my book, mostly because it won't be published until later this spring. But it will be awesome, and it may contain some leaners. So the reason why I decided to write a book is because of how excited I got about SAS. And I've been doing web development for a long time. I got started in the industry in 1993, I mean 2013. I've been doing this for 20 years. A lot has changed. If you look at the way the CMS is now in 2013, you have Drupal. And of course in 1993, the CMS, well, I was the CMS basically, right? I was in charge of all the content, making pages, making sure the markup wrapped around the content. I was the CMS. So when I was searching for images for my slides, I remembered that, in fact, we actually did have mobile devices in 1993. Here's a great picture. But during this 20 years, I've been able to sort of look at the sort of long view of front-end development. And I've been able to learn stuff sort of gradually. Of course, when I first started, we didn't have CSS at all. I've only been doing CSS really since I was dabbled in a little bit in 1998, but basically just doing font colors. That's it. And then 2001, that's when I really started to use CSS for layouts and tried to get rid of all the cruft that we had in the HTML that was talking about presentation. I discovered Drupal, like I said, eight years ago in 2004, I think. And the reason why I started using Drupal was because it was... Before that, I was being really dumb. I was building a custom website for all of my clients, and it made no sense that I was building it all by myself and basically building a completely new thing for each new client. And I discovered open source and the power of sharing and working together and reusing stuff, right? But we don't really have that in CSS the way that we're usually building sites, right? So if you want to reuse a technique that you saw on a blog or you've used previously in a project, what do you do? Copy and paste, right? You're copying and pasting stuff from old projects. You see a couple of lines of CSS that you need to move from one selector over to another rule set. More copying and pasting. It's just copying and pasting and copying and pasting and copying and pasting over again. And it's... That's our code reuse, right? So it's really obvious we do have a problem that we need to get fixed. But the sort of unique problem with this is that it is a complete sort of architectural rethinking about CSS and that's a really deep sort of thought to have. And we are constantly being bombarded with new technologies. These are just sort of sampling of stuff that I thought of in like five minutes that people in front-end development need to be aware of or need to think, maybe I need to know something about it so I can ignore it, right? I mean, we're screwed. This is a lot of stuff. So trying to re-architect our CSS, that's a real big challenge. How many people here have heard of Nicholas Gallagher? A couple of people. He's a really well-known front-end developer. On Twitter recently, he said, are you new to front-end development, front-end web development? Here's a secret. No one really knows what they're doing. No one really knows what they're doing either. Yeah, this is completely true. We're trying to figure things out sort of together. We're like, hey, I tried this thing. It kind of worked. And then you build on top of it, right? You improve stuff. There is a really interesting technology called Object Oriented CSS that Nicole Sullivan came up with. And people have been sort of riffing on that idea and improving it. And now we have SMACS, SMA, CSS. This is another technology that's basically, it's built on top of OCS or on those same ideas. And we're figuring things out together. And I wanted to sort of discuss and talk about today about all the different things that we can learn together. So I need some water. So we have lots of stuff that we have to learn. And it can be very overwhelming. Clark Kent, he was decent at his job. He struggled. He had a lot of stuff that he would try to get better at it. But Lois Lane kicked his ass. She was always getting the scoop. She was always better than him. And you kind of feel like that for the vast majority of front-end developers. You're just sort of treading water. You're trying to improve yourself. And you're trying to get better at stuff gradually because that's the only pace that you can sort of make with everything that you have to do all the time. Client work and all the new technologies, right? So my journey with SAS began two years ago at Palantir.net, which is where I work. A Chicago-based company with a great group of developers there. And two years ago, we decided, hey, you know what? Let's try SAS on the next project. I have no idea if it's actually going to work or if it's going to be useful because, again, I've got that huge list of stuff that I need to learn. But I'm going to try SAS for this next project and then, you know, see what else I need to do on the next project and all that, right? So the reason why we went ahead and did it was because there was zero commitment. I mean, there really isn't any commitment when you're using SAS. This is a great thing. So SAS, how many people here actually don't know anything about SAS? Okay. Good. I mean, not good, but, you know, I'm not having completely redone the slide. Yay. SAS is basically CSS plus some extra features. And what that means is that it has the exact same syntax as CSS, but it has these additional features. So if you write a CSS file like you normally do, that is also a completely valid SAS file. And the way that you use SAS on a website is basically you have like a little compiler that converts your SAS files like the normal CSS plus the extra features into normal CSS, right? So you have this tool running that compiles your SAS files and turns them into CSS. So the way that you, you know, the way, so like, I mean, because browsers don't understand SAS files, right? Drupal doesn't understand SAS files. They don't need to know because you're generating CSS and you just hand off that CSS to normal, you know, normal browsers, they understand that, right? So we realize that because of this, we can write SAS. And if we, like, really, really hate it, we can just generate the SAS or the CSS one last time and then throw our SAS files away. Like, done, but we didn't lose any work, right? We don't have to restart the project because we were using SAS. We still got the CSS that generated. Another reason why there's zero commitment is because it's automatic compilation. I know when I said, oh, it compiles it into CSS, people were like, ooh, an extra step. Not really. All the tools that are, you know, SAS tools, they do automatic compilation. So you're editing your SAS file, you hit save, and immediately that tool converts it into CSS. So your browser sees the CSS as soon as you hit reload, or if you're using live reload, of course, it sees an updated CSS file and that gets loaded in. So all of these things made it a no-brainer for us to at least try SAS. And I encourage you, this is the reason why you should just go ahead and try SAS on your very next project. I have to get this sort of obligatory, you know, how do you install SAS and Compass, right? I haven't talked about what Compass is. That's like slide 30 or something like that. We'll get there. Command line, how many people hate the command line? So bullet point two is the one you want to listen to. Don't worry about bullet point one. The command line, this is free. I use this option. There's a, oh right. There's a really long URL that you're not going to remember or write down or anything. Don't worry about writing it down. My slides are chalk full of URLs. The URL at the very top there, is bit.ly slash sas-4-superman. That is a link to the project page or sorry, the session page for this session. And I've already got a comment that I need to post to that session which will have all of the URLs. So you don't need to post those in. Actually, I should probably do that right now. Come to think of it. Because you might need those if you want to follow along. So let me try this. I'm going to get this browser over here for later in the session anyway here. Bit.ly, I said this works. So I should actually try it fast for Superman, right? There we go. Close up the session. This will allow you to get those. So bit.ly slash sas-4-superman. We'll get you here and then you can follow along all these links. You can even use your mobile device for this. If you don't have your laptop with you. These slides, you can find my mouse. There it is. So this is linked to a blog post that discusses in detail how to actually install it. But it boils down to just a single command. If you have Ruby on your system, if you have a Mac, you already have Ruby. If you have Windows, there's a little Ruby installer you can find. The blog post talks about where to find it. Once you have Ruby installed, there's a command line. Pseudo gem install compass. It will actually install compass and sas for you with the single command. And that's it. You're done. Pull up point two. These are for the people who don't want to use the command line. There are a bunch of GUI apps that you can actually use. Compass app for $10. Fire app for $14. This is one that I actually use in addition to the command line. The developer who makes this app actually will give you a free license if you have contributed patches to sas or compass. Since I have contributed patches to the compass project, I asked him for a free license and he sent me one. It was great. It's really handy to utility, too. Then we also have CodeKit for $25. You use CodeKit? Who uses CodeKit? You love it? I hate it. Or less ensassing. Oh, okay. Yeah. If you're using like a... CodeKit does like sass and less and like coffee script and all these other things. So if you use all those different technologies, CodeKit is interesting. If you just use sass and compass, yeah. Fire app has been great. The thing that I really like about Fire app, there's other ways. There are other ways to install. Does it compile sass as well? For those of you... My friend here is heckling me for those of you who are listening to the video. He's talking about how Live Reload does this also. It's available at the Mac App Store. So that's another option. So anyway, you have choices. You don't have to use a command line, but you can because it's free and it's really easy. When we started using sass, I didn't know anything about compass yet. People were telling me right off the bat I was like, just give me a minute. I got to learn sass first. So I was using this command at the command line sass-dash-watch. And basically what it would do is if you told it, you know, watch this sass directory and compile to the CSS directory, it would take everything from your sass directory. Look for all the sass files there and generate CSS files. And because you're watching, you continually watch that folder. So you basically run this command from the command line and it just sits there and is like, okay, I'm watching for changes. I'm going to watch for changes until you tell me to stop. Control C in this case. So every time you save, change your sass files, boom, it's in the sass file. We really liked using sass-watch command because it had nice sort of alliteration with sass-quatch. Had lots of fun developing the team. So getting started with this is pretty simple. Now we're going to jump into some sort of live demos, basically, where I've taken screenshots because you should never do live demo during a presentation. So I took screenshots of my live demo and then you can follow along and try to do it live demo and we may crash the server if we try to do this all at the same time. But not my problem because I have screenshots. So I'm going to go to superman1. This will actually, and I'm going to do it here before everybody else does it, hopefully. Here it is. This will open up a really interesting website called sass-meister which will basically do live compilation of your sass code in the browser just so you can see and sort of play around with stuff or like do presentations, right? So I have a sass file on the left side and it's generated in CSS. I'm actually not going to be showing you this screen anymore because I'm going to go back to my presentation. But screenshot, same thing, right? So let's talk about variables and colors and color functions. Variables in sass are one of the most fundamental things that I've wanted in CSS forever, right? You have a color and it's in your CSS file 80,000 times, right? And then you decide, I don't like that color I'm going to change it and then it's global search and replace and maybe you screw something up and just wanted a variable where I can define the color once and then reuse it. That's what variables are all about. They're not just about colors, right? You can define anything. But here we've defined blue using this standard CSS by the way the RGB that's in CSS3. You can define the color in RGB and saved it to the blue variable. If this is the only thing in your sass file it's not going to generate any CSS, right? You've just declared a variable it's not outputting any CSS. But now we can start using it. So here's my rule set I've specified that the color is blue it's just a variable and the output of course is the actual CSS, right? In this case sass is being sort of extra smart it knows that some browsers don't know about RGB so even though RGB is standard CSS3 syntax it goes, hey you know what I can convert it I know how to convert it to regular hex value so I'll just do that for you. So it does. And here's an even cooler thing, right? So here's we've got a blue we're using RGBA again the regular standard CSS3 syntax we're going to define a new variable called dark blue and we're going to use this color function which allows us to manipulate colors so we're going to darken it by 10% and that will as you can oops there we go yes if you actually then include that in a rule set it'll get generated out right and you can see yeah well you could see can't quite see it's falling off the edge of the screen oops but anyway the color is actually darkened the background color is a standard blue and the other color is a darkened version of that so there are a lot more than darkened and lightened if you go to the sass documentation again there's a link from the presentation page to the sass documentation you'll discover that there's there's like 15 different ways you can manipulate colors this can be really handy and a really easy way to play around with colors especially with your designers right so you're like oh this I want to darken this other color right and then you change your mind you want to actually more dark all you need to do is change like 10% to 15% and now you've made it more dark than it was before let's go on to nesting so this will make the most sense actually I'm going to run over here don't look at the sass yet look at the CSS we see this in Drupal a lot right where you have a selector that is like styling a menu and then you want to style a link for that specific menu and you have all these different rules that are very repetitive because they've got like the same sort of beginning part to their selector especially with menus you end up with like three or four different parts of your selector kind of embarrassing but that's the way it is because Drupal CSS Drupal 7 is kind of crappy and there's no other way to do this very cleanly so you end up with this a bunch of like really redundant but not completely redundant CSS selectors you can save yourself a lot of typing and make it a lot less error prone if you start using nesting of rule sets so here we're taking the CSS as we're converting it into sass in our minds so we've got the same selector here again our margin 0 and then we're going to this second part of the rule set becomes nested inside this other rule set you can see that the opening bracket is here but the closing bracket for it is not down until line 8 so let's think it inside there basically what we're telling sass is at this spot when I get to this nested rule set take all of the parent selector and prepend it to the selector when we go to generate it grab this part stick it on the front there menu link and that's how you create nested the nested rule sets this is really handy a lot less typing and then let's look at nesting properties this is another sort of typing shortcut so we have a lot of times where we have margin top, margin bottom you can nest properties that have these similar beginnings to the properties the border series has border top, border radius all of those can be nested in the same way here where you have border here brackets and then radius and all that stuff and it just combines it and generates the CSS into normal CSS that's handy, I use it occasionally but it's really good to know about I'm watching the time it's been 30 minutes already and we're halfway through the slides so I have another 15 minutes to finish all the slides you excited yet? common and output styles so sass can actually generate different styles of generated CSS this is the expanded style this is one I've been showing you on all the other slides you can see that the CSS output is pretty standard oh comments though this is a normal CSS comment it gets output in the expanded style this is a sass style comment slash slash this is exactly the same as PHP comments they use slash slash they never go into a generated file so if you use a sass style comment it will never go into your generated CSS and let's look at this is the nested version nested style and basically it will indent any nested rule sets will become indented so the closing bracket for this first rule set is still here so it's not nesting it it's not creating invalid CSS it's just indenting it so that the generated CSS looks a little bit more like your original sass compact basically each rule set single line again I don't really use that one the ones that I use are the expanded and this one compressed in the compressed version it removes all non-essential white space so any returns that aren't needed are removed so you don't need spaces in between brackets and selectors or properties that gets removed the only spaces you need are like this value of this property requires a space in between there so it doesn't strip that out and it also strips out the normal CSS so it strips out absolutely anything that doesn't need to be in there this actually I think it works better than Drupal's aggregations and compression Drupal has to basically it uses this really unholy regular expression to try and parse your CSS and generate it it is not as good as the sass one so the way that we work at Palantir is while we're doing development we're using the expanded mode and that allows us to like see things a little bit easier while we're developing and doing inspecting styles and all that stuff but then when we're ready to go to production and move it and deploy it we turn on the compressed mode and single line no comments, no extra white spaces awesome and how many people here have used the Zen theme? so you probably know that there are a lot of comments in Zen CSS the whole commentings thing so excited about sass because people complain like it's so bloated and like it isn't anymore oh man anyway so it does like try to do something to it but there's nothing it's already done better than it could so it goes oh okay yeah it'll still yeah the compression code in Drupal won't affect this compressed code but it will still aggregate it so it'll bundle it up with other CSS files that are part of Drupal modules parent selectors now this happens all the time there's a library called like Modernizer or something you might have heard of it and I don't use it too often so I think the classes it creates on the HTML classes like has this and has that I'm joking Drupal of course has lots of body classes so outside the body tag lots of body classes the nice thing about the parent selector is when you're styling a particular piece of your Drupal site you can create a nested rule set but then specify this parent selector should go here so basically if we didn't have this ampersand here this is the parent selector you would get this the generated output would be sort of just the opposite here dot button space has border shadow but because we put the ampersand here this thing says when you generate the CSS look at the parent selector and jam it into this spot does that make sense so basically the nice thing about this is that it allows you to sort of logically group your styles oh I'm styling the button thing here and having when you look at your CSS normally this whole section here can sometimes jar you as far as what your reading through it goes is that part of the same thing oh yeah it is because the way at the end of the selector is the same thing so how many levels deep can you go and still accept the so how much memory do you have your computer that's basically it can go as far as your computer can go I would not recommend more than like 2 or 3 levels but it you know the parent selector will work just fine no matter how deep you go yeah so my goal my goal not what I actually accomplish but my goal is to write rules rule sets that only have a single class in them like so basically my goal is not to use any nesting at all because of what I've learned about smacks but I don't know I've never cheated yet so yeah limit the number of nesting that you do but it can be super handy when you have to use it and I've always had to use it so when the ampersand I never accidentally put ampersand in my CSS selector so yeah no I you know down here I actually read the reference material yeah I read the docs I know it's kind of crazy it's part of the reason why I write a lot of documentation okay so here's one more thing that you can do with the ampersand you know you can also remove the space that you would normally get so if you have a nested rule instead of it being a space colon link you put the ampersand right next to it and when it's generated it takes the parent selector and shoves it right where the ampersand is which just says there's no space in between these things okay a colon link right that creates you know valid CSS here actually the other thing would have been valid CSS Rolfang so that is also a really handy way to use ampersand yeah exactly so if you had a button as the top level and then underneath that nested you had like red button or something like that and that class gets applied to one element you can nest it and then put the ampersand dot red button and then when it gets generated it's dot button no space dot red button and then the rest of your rule said that's another handy way so let's look at imports so let's take these sort of three example files say this is our the sum total of all of the files that we have inside our SAS directory and we have our styles.scss file because I haven't mentioned it before but SAS files the ways the way I describe them end in a .scss which stands for .sassiecss so these are our styles.scss these are only two lines that we have at import normalize at import print now at import of course looks almost identical to the regular CSS thing but if we were using a normal regular CSS at import we would have to say at import quote normalize.css end quote that would tell the browser oh you just download the styles.css file now I'm telling you to download this other file wasn't that efficient yes that's the way that at import work usually avoid them like the plague in regular CSS not so with SAS well for one thing I should go back here one thing you don't have to include the file extension at all so it just knows that it's a .scss file why don't you type it so you just type normalize and it knows oh I'm looking for the .scss file no problem so it looks for those two things I'm giving you sort of an example not cutting off here it's cutting off there hopefully we will only be missing like one or two characters on the screen it does say normalize here and not normalize but anyway so here's some sort of sample CSS right it's not that exciting what's in here but what happens is that when it goes to generate the CSS from the styles.scss converts it into styles.css basically what happens is it takes the contents of normalize.scss and the contents of print.scss and combines them into the styles.css file so instead of doing this really inefficient CSS at import it does a very efficient SAS version of at import which is basically it's including the entire content right where you put the ad import this is pretty handy now I should note that SAS will still generate the CSS files for normalize.scss and print.css because that's the way we define them here so it's going to generate a styles.css that concludes the contents of both of those files but it will still generate a separate file for normalize.css and print.css however if we rename normalize.scss and print.scss file I'm really getting tired of saying scss here to include an underscore before the name it is now it's called a partial and what a partial file means in SAS is when SAS sees that file it goes oh I'm going to completely ignore it so when it generates the CSS files it will not generate a file for any partial file it will only generate a file for your regularly named un-underscored that's an awful adjective styles.css but our styles.css file includes the contents of the other two files anyway we don't need them those are completely superfluous so converting them to partial means that in our generated CSS directory we've just got the thing that we actually need which is styles.css and I should point out that inside styles.scss we actually don't need to make any changes to the code that we had in there in the previous slide I don't have to specify underscore normalize and underscore print when SAS sees that it will look is there a file called underscore normalize.scss yes so I'll just use that one if there isn't then it will look for a normalize.scss and if there's neither of those files in there it's going to go hey you told me to import this file I can't find it I'm stopping right here and instead of generating the styles.css file like we expect it will generate a single like css comment that says you screwed up and this is how this is handy because obviously you don't want to create a bogus ad import statement and of course when you reload the browser you will lose all of your styles and go what happened and of course you'll go and look and then you'll discover what happened super handy feature partials another thing that partials are really handy for is this technique which a company called base the base partial I just call it the init initialization because basically inside this file is you declare all your variables right and you also import all of your modules I haven't talked about modules yet but they are basically they're partial files that you download from some place else they're distributed partial files so you can import compass and grids do that inside this one file and then in our file organization here if at the top of our styles.scss file we import the init so at import quote init semicolon if we do that and then import all these other files after that in all of these files everywhere we will have the access to all the variables and modules that we included in the init right because from the standpoint of sass as it's generating this styles.css file the first thing it did was import the init here's my variables here's some modules cool and then it starts doing all this other stuff and processes and other things and those variables are now available to them this is super handy when I first started using sass I basically add imported this init file inside every single file because I didn't know any better you only need to do it once in the styles.css file so our styles.css file which I don't have a copy of well yeah it looks really similar to this except that at the top it will say add import quote init semicolon and then it will add import all the other sass files those of you who mentioned smacks I'm trying to do sort of a smacks based file organization still working on it haven't really perfected it yet but this is where we're at right now actually if you're interested in that sort of thing we're trying to come up with CSS coding standards as well as CSS selector standards and file organization standards for Drupal 8 and we'll be sprinting on this stuff we already have like a draft that's been through a round of voting stuff we'll be going over that on the sprint day on Saturday so you can come find me and we can talk all about this stuff but at this point guess what everyone in this room has the knowledge that they need in order to do Drupal integration seriously it's really simple here's the entire technical document inside your .info file you have a single line that says style sheets all pointing at your generator css file css.style.css that's it if you want to add a new file to your theme you basically create an underscore or whatever you add the at import whatever into your styles.css styles.scss file hit save you do not need to change the .info file you do not need to kill Drupal's cache yay all you need to do is reload your browser that's it this is the entire Drupal integration that's it now I know a lot of people say there's a module for that I have I wrote a book on module development I wrote that exact thing in my book on Drupal 7 module development but in this case I put a little asterisk there because that actually refers to completely screwing up your css and the reason is the Drupal modules that try to integrate sass the only way they're able to do that is by using a it's basically a fork of sass because sass is written in the Rubin language and they decided hey in order to integrate with Drupal we'll use this fork of the normal sass that's been rewritten in PHP and a PHP version of sass equals a buggy version of sass it's not extremely buggy but it's subtly buggy which is way worse so if you see a module in sass that for Drupal that says they can do sass stuff ignore it so like we've learned a lot of stuff and I hope you see that the amount of time that we're we're doing stuff just based on the stuff that we've learned we've already started to speed up a little bit we're typing a lot of stuff we're able to you know using partials we could now like copy an entire file from one old project to a new file in the new project so there's some speeding up there that we can do there still not Superman yet we're getting faster extends in placeholders this is a concept that just got introduced into sass 3.2 basically it's super new it got released in like did anybody know the date? I think it was like September or something it just came out it's really new but it's really powerful that's why this is such an early slide in my presentation although yeah we've been doing this for 48 minutes here is a placeholder selector instead of the normal like dot element invisible which would be a normal CSS class selector or you know pound signed element would be an ID CSS selector we use the percentage sign which is a special selector to sass that says when you are generating this CSS don't actually do anything with this just don't generate any CSS so by itself this makes absolutely no sense but step 2 we can use the at extend so inside this normal selector we were at extending the placeholder selector so percent element invisible and what happens here is that now sass basically says this selector is extending this other invisible placeholder selector I'm going to copy this selector and put it here in its place so it will now generate this entire rule set but using the selector that we put here dot example becomes the selector that is used in generating CSS here example 2 is doing the same thing extend so its selector is also copied up to here so we have dot example comma dot example 2 bracket and then the normal stuff that's inside this placeholder selector and just to give you a clear idea of what's actually going on here here we've got color red added to the example and you can see it's still generated there but it's still generated because the extend tells sass copy the selector to where the placeholder is so at extend percent element invisible will copy this selector up so copy the selector up copy this selector up and then it still generates this this rule set color red this is really really powerful go ahead assign all of these properties to a variable so the question is could you take all these properties from the from the placeholder selector and copy to a variable the answer is no but there's something really similar to that which is the next slide so the reason why this is super powerful of course is that we can write a bunch of these really useful placeholder selectors like element invisible a lot of people use this selector a lot of times they're like clear fix it's another great one you can create a clear fix placeholder to sort of define it at the top of your file and then sass the way you want to organize it and when you need clear fix added to a particular element inside that selector you just say at extend percent clear fix it will copy the selector from there to the top of your file where you have the placeholder so when you're like say this is not line 9 but 9000 please don't be 9000 but you know what I mean way down to the bottom page you still have a clear example of what's going on what this selector actually does it's extending element invisible right if I was just using normal CSS and I was down here at line 9000 I would have no idea that way at the top of the file I was also using that same selector you lose it in normal CSS but it's completely transparent really obvious inside your sass great yeah sorry you use a variable here oh inside here yeah absolutely yeah you can use variables you can use nesting even inside a placeholder selector yeah I don't believe that you can nest a placeholder inside a placeholder the thing that's nested inside the placeholder would have to be a regular selector but that would for example allow you to create a placeholder selector I'm just shooting the breeze here like a percent menu placeholder selector and then nested inside that would be like dot menu link right and it wouldn't generate that nested thing until you actually extended right and then it would it would work it would work exactly the way you would expect it to work hopefully hopefully your expectations are what it would do but it will work exactly the way I expect it to work mixins mixins are kind of the opposite of extending you define a mixin you say okay I'm defining a mixin it's kind of like a PHP function but you specify the you specify the properties you want to this mixin and you're saying that this is basically the label for my mixin and you can pass in parameters here like PHP functions so you can specify that this first parameter is radius this variable here is basically so you can use this parameter variable inside your mixin wherever you want and the default value is going to be 5 pixels so if you don't include a value when you're calling this mixin it'll default to 5 pixels and how do we use them pretty easy actually just add include rounded corners here we're using it without the parameter and so when it gets generated it's using the default 5 pixel variable here and then here we're passing 7 pixels as a radius and it gets generated out and then it's using 7 pixels so basically instead of like an extends in placeholder selectors you're copying the selector from one spot up to the placeholder here you're copying the properties from the mixin into the into your rule set so we're copying properties instead of copying selectors yeah yeah yeah yeah that's another slide there's like two more slides I know it's exciting people who know sassas are like this is actually really exciting so again bitly you can actually play along at home go to that URL it'll pull up the sassmeister and you'll be able to like play and modify it you can change that to 20 pixels go nuts you know right so mixins these are really powerful right so like this mixin that I wrote right here for round and quarters is really lame because it completely ignores all the vendor prefixes but could you oh yeah yeah so the question is in here instead of passing an actual value of 7px could you pass in a variable here so say somewhere at the top of your top of your file or inside your init.scss file you'd specify that standard round d is you know 20 pixels that's the variable you create standard round d put dollar sign standard round d right there and it would just spit out exactly like you expect so mixins are really powerful but having to write all of your own mixins is you know it's the you know I'm going to build everything by myself mentality right but we have this great thing called compass and basically what it is is it's a library of mixins right and so you don't have to write all of the stuff yourself like css3 the round and quarter one that's already in compass you don't have to write a lot of stuff you can just reuse what other people use right you're using Drupal you understand this concept of open source right that's what compass is it's a library of mixins on top of sass so so there's good news I promise I'm running way late but there's good news I'll go through the super fast data you arise here's something to do with compass if you normally normal css you specify the url to particular image right and basically what this tells the browser is like okay you've just downloaded the css now so we'll download this png file and use it in this way right in sass instead of using url we can say inline image and the name of the png file compass actually knows where your images are inside your theme because you tell it where it is there's a topic that I'm not going to be able to cover called config.rb you basically specify hey this is where my css is this is where my sass is this is where my images are so these are the paths to them you don't have to repeatedly specify the path to your images it just says go look in the images and find this one and we're going to inline image it and what it does is when it generates the css it actually creates a data url so instead of like the regular like a relative url here it's a data url data colon and image and then it's base 64 encoded the browser no longer has to do a separate painful hdpe request it's right there inside the css file this is great for small files not so good for really big files but really good for css small files like messages and menu stuff great place for it how supported is base 64 encoded I think it's like with small images IE8 and later support data url and you can come up with a strategy for dealing with IE6 and 7 if you want to vendor prefixes so we've all used this site I assume caniuse.com or something like that and trying to find out what are the exact vendor prefixes I need for this exact css3 property I can better remember I have to go look it up I hate that so instead we're just going to do add import compass because you know all these GUI apps and the command line we've already installed compass so it's available we say add import compass and sass goes okay I'm going to go look where compass is installed find it it's going to import all these modules and one of them is a css3 module that has a mixing called border radius which is the way cooler and better version of border radius than the one I wrote earlier and when it generates a css it's going to generate all of those open vendor prefixes for you hallelujah this is awesome never have to worry about vendor prefixes again just go to the online documentation compassstyle.org find out all about the different css3 prefixes this is fantastic right compass has a lot of stuff like css3 it has these data URIs it does sprites this thing is incredible I don't have time to talk about it because it's like easily like half hour 45 minute topic just in itself but you basically say okay I want to build this sprite from these five images that are in this directory go and build that sprite for me and it goes okay and it does like it's it's ridiculously simple it's like five lines of code every time you modify the image it goes and generates a new sprite for you it's just so awesome I can't believe it zen grids zen grids is basically it's a library that I wrote that specifically it works with compass but it's for layout so zen grids allows you to create a responsive flexible layout and compass and zen grids they can basically they can turn you into Superman right you're starting to get this power of all these different things and I would love to talk for another hour but there's a bof tomorrow where we can continue talking about this stuff sure yeah I'm gonna wrap up here in like four minutes and then we can do QA for but you're free to what leave now cool so can't finish all this stuff it's complex or deep topic right I love talking about it we're gonna have a bof tomorrow 1045 and you are free to like just bombard me with questions so zen grids is a way that I decided to sort of share I knew a lot about layouts if you ever use zen the sort of original version of zen if you ever look at those layout files the CSS it's massively complex CSS there's lots of negative margins in there but it builds a rock solid layout but it's really hard to modify the CSS is crazy and there was no way for me to make it simpler so zen grids is like ridiculously easy for me to create a layout and I guess I will show you that real fast since we have a little bit more time so zengrids.com I have my little manifesto this page here on the home page I have my little manifesto of why layouts and CSS is really hard and why you must use SAS of some kind there are other layout modules besides zen grids there's a module called SUSE S-U-S-Y which is also very popular singularity those are also other ones you can use instead of zen grids this is the one that I developed because I thought it had sort of unique features that I really liked so building a layout like using all that complicated CSS is completely hidden from you all you need to do is like add import zen you specify how many columns you want in your grid column grid count of 7 how much space you want in between each grid in this case we're going to do a fixed gutter of like 10 pixels in this case which is not very much a good gutter but as an example and we've got 7 columns and of course because of the responsive layout we want to use percentage widths on our columns but we can still use a fixed gutter because I know how to do it in the CSS I know about the complicated CSS in order to get this to work it's using and then we specify we just add this container here which adds in some sort of little magic to the container and then each of our individual grid items we start laying out in our grid here we're applying to this a side one we are applying this mix in then grid item and we're basically these parameters these two parameters is all it takes for here the 4 says that make this grid item span 4 of our columns in our grid and the 3 says make that item start in the third column over from the left right so 1, 2, 3 we're starting there and then it spans another 4 columns not another 4 columns it spans 4 columns total and then this last one we're doing the same thing we wanted to span 1 column starting in this 7 column from the left right and here's how we start a new row every time we want to start a new row because basically these are the html source order as well so the next item in the row we just say okay zen clear that starts a new row we can talk about this more tomorrow but this is all you need as far as the code and zen grids it's pretty straight forward pretty easy and this is the layout that it actually generates this is a live code example here if I can grab the side here and you can see that it really is completely flexible it's a fluid grid and yet the gutters are fixed with they're staying at 10 pixels so we use like what is this 10 11 lines of code and we've generated an entire all the css for this entire layout it's super powerful super easy to get to learn and we can talk about it more afterwards if you want to come up with it later and at the buff and this session was titled css is our superman or sorry css is our clark kent sass is our superman I started actually doing this presentation and coming up with it I realized that when we start sharing and collaborating like this we can basically build off of each other and I've already started to see this so I wrote this zen grid which allows you to create a layout really easy but I didn't have a really good sense of how to deal with breakpoints because you don't want to have to keep writing your breakpoints over and over again but I didn't have a good solution for it so I left breakpoint completely out of zen grids and it's not included as part of it but somebody else went and wrote another module that's called appropriately the breakpoint module and it is fantastic exactly what I would have wrote if I had you know had the time and the inclination to actually do it like yay so and that's actually written by mason it's canary mason on twitter and his actual name is thank you he works at anyone he's a Drupal person he works at ZivTech and so both he and I have shared stuff with the compass and sass community and we're we just happen to be also Drupal people right so by sharing this stuff and working together we're able to leverage the knowledge and the experience of this vast group of people and you guys don't have to learn about how to build a layout anymore you can just use one of these modules that's already available susie or zen grids or cinculari.js was built by another guy in the sass community co-developed with another Drupal person there's a lot of Drupal people using sass already we can work together and what happens if we all shared if we're all superheros what do we get Justice League of America hell yes thank you feel free to leave but you can also stay for questions what did you think I created a convenient bit.ly URL so you can go straight to the you know it's bit.ly I love Superman I hope that in no way influences your session review but you can also follow me on twitter at john elvin and feel free to stalk me the rest of the conference questions oh there how do I deal with margin and padding and zen grids so if you read the documentation it spells it out exactly the way that it actually works the way that we the magic css that's being used is a property called box sizing I actually did a blog post on palantir.net recently that talked about the actual sort of underlying css technique that used in zen grids it uses this box sizing property that the normal box sizing model is basically your width property specifies it specifies the width of the content not including padding or borders right completely messed up right that's like saying okay I want to add padding to this box obviously I'm going to automatically make the box bigger when I put padding in it it's just crazy so there's a box sizing content box box dash box dash sizing content dash box semicolon that allows you the padding and border to be interior to the width so since we need to use percentage values for our columns right you know use 10% for the width of the column and we're just going to use box sizing content box and then specify that the padding is 10 pixels on the other side so the gutter value that you set in zen grids is cut in half and then it puts half of that gutter value as padding on the interior I am working on a new version of zen grids that will allow you to also specify the margin in between it Morton was bitching about that so I'm working on that but that's the way it works in zen grids 1 so yeah I know crazy huh Morton was bitching any other questions I know it's like 615 like I love those I love esoteric questions thanks could I just say thank you very much for your work and your presentation as well it took me a little while to fully grok what was going on with zen grids but I appreciated that I could use zen theme, zen 5 without using zen grids and I could use sass without using anything of course it took me a little while because I'm used to CSS frameworks like 960, GS or blueprints or things like that to realise that the magic of zen grids is that it works with anything with any crappy class selectors because what you're doing instead of taking the class selectors that the grid framework requires that you use you're taking the class selectors that droop or crappily handed you and then apply a mix into it to make it behave like a grid frame so thank you it took me a while but I got there so my real question though is I thought I'd just say that because it wasn't immediately clear to me that I had to turn my head upside down even that you know I was trying to apply zen grid layouts to panels so there's a lot of code and panels, there's a lot of nesting and then you add views and you add fields and there's a lot of nesting so I see that there's zen nested container is it zen nested container or is it zen nested item sometimes it I don't have all of the mixes I don't have zen grids memorized either I'm constantly looking at my own documentation it's good documentation so there are a few variants on zen grid container and one of them is this nested container which is I believe for when you have an item that is also a container of more items okay so the problem is that I think I'm getting into and I'm not sure how I should solve it in the John Albin way is sometimes those those containers that I want to create new items inside of are children of other zen items but they're not immediate they're not the same object so it's nested multiple levels down so I've got a container and some and then some items and then inside that I've got a few more devs because it's panels and then I've got another container with more items and the thing that I'm that I'm trying to get rid of is the padding on the left and the right of the first and last items right so um so zen nested container whatever the heck of the name of that let's go and look at our documentation here because I don't remember reference link zen nested container um you can only apply this to a the same element that is also a grid item so if it's um if it's a grid item on a sort of larger grid you can apply this nested grid and it'll basically it basically removes the padding that I was talking about that we're using for gutters because then inside this nested grid you know all of those children must also be grid items now inside this new container this new nested container so it removes the padding because the children all have the same padding right so we don't want to double up on our padding for this nested container that's what the nested container thing is about your problem is that there's padding somewhere in this vast jungle of dibs um in between the actual grid item and where your children are right um removing it by hand is perfectly acceptable um if it really has to be like somewhere in the middle there um I would say that probably yes right so the subtle thing to recognize about these containers that inside the container you can only have grid items you can't have grid items and some like regular paragraph content that's just flowing around because the containers are just going to go smashing on the top of your your flowing content or vice versa your flowing content is going to throw the grid items way out of whack you can't you can't combine stuff you can't combine flow stuff and grid item stuff inside a container right so flow stuff goes inside a grid item um so so you should be applying the nested container to the actual grid item and if that gets rid of all the padding that you want then great you're done right if there's some padding somewhere else then you're just going to have to remove them by hand and just so the when you specify a container um and say there's like eight levels of divs underneath that before you get to any children items that should be fine as long as there's no layout css being applied to any of those levels of divs yeah yeah so yeah yeah so the nested container is used instead of then container for that nested container right did I say something else besides border box when I was giving these no content boxes the defaults border box is the one that I actually used sorry we did not go I mean the zen grid questions are great but for those of you who are like I have no idea what they're talking about um there's actually a webinar it was like an hour and a half long um that Aqua again Palantir did together that that I was presenting on um so there's video of me giving a presentation that's just on how you can use zen grids inside Drupal so that's a great resource any other questions great thank you so much I appreciate it applause