 My name is Aisha. I run a small business here in Atlanta. I have a couple of developers and a couple of designers, and we just do small business websites and maintain their websites as well. I also love All Things Web. Any time there's a meet-up in Atlanta, I try to make my way to it. One of the meet-ups that are recently in Atlanta is the Atlanta SASS Meetup, led by Jason Reece, and he is awesome. He knows a lot of SASS, so if you guys are residing here in Atlanta, please come and check it out. I'll put a link up at the end of the slide and tweet it out as well. If you want to learn more about SASS, he's definitely the guy to go to. A little bit about me, I have a computer science degree, so I'm coming from a programming background, not so much front-end, but back-end. My favorite language is PHP. I do a lot of web development or web applications using that language. When I first started the WordPress development, it was back in 2009. I fell in love with it because it has PHP and I already knew it, and it was nice. I understood the flow of it, so I just started using WordPress for about 90% of my client sites. We use WordPress for it. I also am a jazz lover. I love to listen to jazz while writing my code. I'm a foodie. I love to check out all the restaurants here in Atlanta. Any ATLians here? Cool. Nice. I'm also a family gal. I love to be with family, and it's kind of hard trying to balance that work-life family, so I just try to make it work. One of the things that I do is make sure that I dedicate the weekends to my family and try to work strictly Monday through Friday. Sometimes that's hard. I know, Sunday. I owe them. All right, so let's see here. All right, SAS CCSS and WordPress. That's what we're going to talk about today. The first thing I guess we're going to talk about is what is SAS? How do we use SAS? SAS stands for syntactically awesome style sheets, and it's basically the way I understand it to be. It's a CSS extension that lives on top of your regular CSS that you write, so it's like a preprocessor that gets compiled into your CSS. And the reason for that is because it saves us a lot of time. So for example, you got your CSS file, or your SCSS file, and then you got the compiler, which is a SAS compiler, and it generates a CSS file. So why do we need to add this extra step to our particular workflow? Well, for me, it saves a lot of time, a lot of time. And one of the things that, if you're coming from a back-end programming experience, you can easily grab some of the syntax and some of the things that are the features that lives inside of SAS. But if you're coming from just the front-end development, it takes a little bit of time to get used to. And you can start off small, like even just one of the particular features that are within SAS can save you a tremendous amount of time. And we'll get into that later. Okay. The way that you install SAS for you really hardcore programming heads, you can use the command line, but I'm not a fan of the command line. I love to see an application in front of me to see what I'm actually doing and something that's going to actually let me get to me doing the creative part of the workflow faster. So I use GUIs. For the Mac lovers, we got CodeKit. It's very awesome. You can just drag your particular theme that you want to start working on into CodeKit, and it does all the work for you. You can do a couple of check boxes here and there on the particular features that you want, like the output of your CSS, and it does everything for you. The main thing that I like using a GUI for it is the auto refresh of the browser. You know how when you update something and you got to click refresh? You don't have to do that with the... Well, with CodeKit and with pre-pros, you don't have to do that. There are a lot of other GUIs out there, and I'm not sure if the command line does that. I don't work with it. It does. Cool. Okay, got. But that's one of the... That sold me right there the fact that I don't have to press the refresh button when I'm doing my coding. It just refreshes right there. I update something, and I see it a second later. And for the windows, pre-pros is very good. I've used it once or twice, and I like it. But I have a Mac, and I purchase the CodeKit. I like it better. But if you're not a fan of the command line, I recommend pre-pros. The SAS compiler. There are two different types of SAS compilers, and Lib SAS is one of the newer ones. The difference between the two, the Lib SAS is written in C++, and the Ruby is written in Ruby. But the main difference is the Lib SAS is said to be much faster. I'm still on Ruby SAS, and it's kind of fast to me. I work on small websites, so I don't really see a big difference right now. But if you're working on larger websites, you might want to install Lib SAS. And again, with the CodeKit or the GUI, it recommends which one you want, or it asks you which one you want. You can do Lib SAS, or you can just check the box that says Ruby, and it would do everything for you in the back end. The syntax. There's two different types of flavors or syntax of SAS. If you write CSS code, you may want to do the SCSS. That stands for SAS-CCSS. That's strictly writing in CSS, so you don't have to change your workflow that much. You write it in CSS. It's a couple of features that you may have to learn, but you're going to love those features once you learn them. SAS is more of an indented syntax. It reduces the amount of space, as also the brackets are gone. So I'm not really familiar with that style of coding. I stick with what I know and what gets the job done faster for me. So you make your start off here, and if you think that you... I'm not sure of the advantages of using the other, or the indented syntax language, but I guess if it's not using a lot of brackets in space, it may be faster. I don't know. But in the end, you're going to output a compressed style sheet, so I'm not really sure of the advantages of that. So I just stick to what I know. Speaking of output styles, with the GUIs that I mentioned earlier and also with the command line, you can choose your output style. The nested is the default. That's just your regular flow of writing CSS, and that definitely gets you to read it and understand it better. But if you're putting this on the production, you want to do maybe not be expanded. The expanded is a little bit compact, but then you have the compressed version. That version just puts everything on one line, which is what you want. So you have one CSS file going up to the server, and that server is reading it in that one line, and that's much faster than the other three mentioned. Okay, so now that you know a little bit about size or how to install size, let's say you just downloaded a fresh copy of WordPress and you want to start developing your theme. A starter theme that I like to use is underscores. Very nice that they're made by WordPress, automatic team. So they have a lot of the features that are needed within the WordPress core. So that's good enough for me. That can be my starter theme because I'm using WordPress. Why not use underscores.me as your starter theme? With the starter theme, you can generate if you wanted to have a size file or not, and then you write your other features that are your name. And I think the second line is how your database tables are going to look. So they kind of customize your database tables instead of the WP slash whatever. It's going to be whatever you put right there. So that's a really great feature. You put your author and the author URL and a description. And then you click Generate and it's going to generate your starter theme for you. Within the starter theme, the first thing you want to make sure that you have is in the style.css file, you want to have an exclamation mark in the comment section. So with SAS, SAS strips out the comments that are the two slashes. The two slashes, SAS strip those out. But the comment section right here, if you add an exclamation mark, you are telling SAS to keep that there because that's needed for WordPress. So make sure that you do that so you won't run into any problems. So the folder structure of SAS, once you download the underscores.me, they give you a SAS file. Within that SAS file, you have a lot of folder structures, it's not a lot of code already written. It's basically structuring the layout that you have so far. And it's not even a nice layout. When you actually activate this theme, it looks horrible. But it's meant to look that way because they want you to get creative with it. And I prefer it to look that way because nothing is there, so that means I can start from scratch. So they just give you a lot of already dimensions that you think you would use, some modules, and inside of these folders, you see how it has the underscores.normalize.scss. Those are called partials. And I think the next slide shows you an in-depth look of that. But within all of these folders are partials. You still have your one output file which is going to be the style.css, but this is the SAS of that style. So you're still always going to have one file that you're putting up on the production site, which is always good. So within these folder structures, you can kind of go in there and say you want to edit something on your forms. You want to make your forms look really nicer. So you go into the forms and it has a particular style setting already there, a bare bone style setting. So you go in there and you add your particular styles. These are already imported in the SAS files. For example, this is a partial that's within the mixing. So right here we have our theme and we're importing variables that site. So you can see that. I'm pointing at the wrong one or I don't think it's showing the... I'm scared to even move this because it may mess up. But the mixing folder, so you're inside of the mixing folder right here and you have a mixing file where it's displaying some content right here. And this is that. So how you import that, you're importing that right there. It's going to say mix and dash master. You don't have to put the underscore or the extension to it. You just have to put the name of the file and SAS will know to pick that particular one up. And what that does, even though it says, I know NCSS when you're importing something right now that's calling another HTTP request, but within SAS it doesn't do that. So it's not requesting that. It's going to actually bring that in in the compiler and put that all inside of the main file. So it's not really calling. It's still only calling one HTTP request. That actually is my cue to ask you if you have any questions thus far. And drink some water. Thank you. And I know if I'm going too fast, please ask questions. Go ahead. You're talking about expanding the partials or the SCSS file. Now, I'm saying you're sure that you probably have an original code, but if you're working on someone else's who doesn't and you need to work on that style sheet, can you expand it back out again? Okay, got you. So with that, you want to inform whoever is working on it, hey, we're using SAS right here. You want to let them know that because if they edit that style.css in their own way and upload it to the server, and then the next day you come back to SAS to output a new CSS file, they're going to lose their changes. So you need to communicate that with them. If they're not familiar with it, you can kind of create a customs SAS file that's going to generate and tell them to write that in a customs page, and you kind of have to take that and paste it within there. There are also plugins in WordPress that has, you can, I haven't used any, plugins where it can convert. It does all the compiling on the actual server, so you don't have to work on it locally. But that person still has to know SAS and only work in the SAS file for that to happen. Any more questions? No. Okay, let's get down into some things that you're going to learn when you're using SAS. The main thing that I learned first, and I just used that on one website, I didn't learn any other features with variables. And that's the best thing that I think is a part of the SAS. It's the fact that you can create variables, meaning you can create color codes within a variable. And so, for example, your CSS file right now is probably 20,000 lines. Within those 20,000 lines, you got a branding color, and you have to always reference that branding color. So it's probably in more than one line. All you have to do with SAS is create a variable for that branding color. So you got your primary, your secondary, and your tertiary colors. And all you have to do is create that variable and put the color name in there. And all you have to do is call, let's say a client calls, and they want to change it from red to blue. You just have to change it in one line. And you don't have to go through all those other lines to change it. I don't know how much time, but it only takes five seconds to change that color line right there. And you can charge the client for $150. But that's the best thing that I've learned. And just for that alone, I started using SAS more and more and taking down their features. I just grabbed their features and used them one step at a time. This was the best one that I've gained thus far. Nesting. Now, with nesting, it's really nice to use nesting, but you have to be careful about using nesting. We're not nesting too much. You can't go... The general rule is not to nest over four layers. So I don't nest over three layers. But nesting is when you can do... Let's say you want your lint colors to have a particular font weight, a text, a color, and a border. And then within that, you also want the hover to be a different color and have a different border color or whatever. So you definitely can have that within that. Normally with your CSS, you have to do A, write all your information for your A, and then you have to do A hover and write all your information for that. So this is kind of reducing the time that you have to do. I mean, you have to write your code. And plus it's right there and it's neatly organized. But just don't nest too much because it will get bloated. And that's not a good thing or it's defeating the purpose of using text. So just keep that in mind with nesting. Don't over nest. Mid-sense. Mid-sense are like little functions that you can use. So for your radius, you know how it's different types of... Different browsers have different ways of writing your radius or your WebKit. And what you want to do with all of them, there are already mid-sense out there or have mid-sense libraries that are out there that you can take and just use it within your code and just have it within this one mid-sense. So anytime you want to add a border, you don't have to rewrite everything all over again. You can just write it within once, you can just call that particular mid-sense and put the border radius amount and there you have it. So it's looking good, it's looking neat and you don't have to write it millions of times for a million different things. Extend. Extend is like you have a particular selector that you write. So for example, you got the message and you got a couple of styles within the message. And then you have your success error, I mean your success error and your warning message. You want to take that same information and put it inside of there, but you want to add a different color to it. So Extends allows you to do that. You write that message, selector style, and then you extend that message and you also say, I want the border color to be green instead of I think that's gray. And then for the error, you change that border color but you're having the same other styles but you're just bringing on the selector message to the border color. And then output is going to look something like this. So again, you're just writing more efficient code in a program way. So you want to make sure that you're doing everything proper and right. Okay, SAS maps. SAS maps is like let's say you have your colors your primary, secondary, and tertiary again and you have these three colors and you have a selector that you want to add those three colors to. So you want the background to be a particular color and you want the color, the text color to be a particular color and the border to have that. So you can call that map function that you create initially instead of writing all of that all over again. It kind of reduces the amount of code that you have to write and the output is something like that. And these are very basic examples. It gets very, very extensive but I want to show you how you can implement it now and then grow. That's how I'm learning right now. I just start doing some of the things looking at the output and then I take a moment back and see what I can do to increase that level to save me more time. Okay, there are already some built in SAS functions. One of my favorite is the color functions. The second row, the RGBA you can create your colors and you don't have to do red, green, blue. You can actually do a Hexadex mother color comma alpha and that's going to give you the colors so I love using that because sometimes you may want your background to be a light blue but you want your you want another or you want to lay out within the background to be a slightly lighter color than that so it's good for something like that. There are many, many SAS functions already built in that you can take advantage of. Media queries. This is when I fell in love with SAS. SAS allows you to write or nest the media queries right inside of the selectors that are the the selectors that you create so you definitely take advantage of that where you don't have to go all the way down or sometimes you may be making a site and you got your media queries in a different file and then you got your main file here that's two HTTP requests that you're calling so with this instead of scrolling all the way down to the end of the file or exporting your media queries in another file you can write it right within your you can nest it right within your selectors and that's to me that's a beautiful thing that's when I fell in love with SAS so when I'm doing my responsive design I love it and I can't wait to look to learn it and do it within that okay source maps for SAS so you know with the CSS the best thing that we love to do is right click and inspect elements so they have that for SAS as well but you have to on the command line this is what you can write and you'll see that at the bottom of your CSS file that's how you do it on the command line but in a GUI one of the GUIs that I showed you earlier in the slide presentation you can just check use source map and it's going to create that file automatically for you so for example inside of the code kit you see it's checked right there create a source map file and it's going to do that for you and once you do that it's one more thing that you need to do which is also created um this is actually a GIF because I'm not used this is on speaker deck and I don't think they allow you to do the GIF or the video so it's not moving but within Chrome you can click on the settings and within settings it's another couple of check boxes that says use source maps and then you'll be able to use your source maps once you check those settings okay sources all the information from this PowerPoint was from a book that I read before I dived into size and it's a great book it's like 99 pages you can read it really quickly it's a very nice read and from my ATL SAS Meetup group I got a lot of the um code that I posted up here from the website JasonReese.com so definitely take a look at both of these sites and I also have resources at the end that also tells you a little bit about how to get started the main webpage of it and just dive into it any questions go ahead yeah so how do you work Flogo do you purchase a theme and you um yeah a lot of times I'll purchase a really good theme and I'll just kind of learn it really really well and then just tweak it for individual clients and whatnot so for a theme that you purchase you create a child theme within that child theme create a SAS file on that your style um follow the same protocol from the previous slides by adding an exclamation mark and that style sheet you can just turn the beauty of SAS is you can turn any CSS file into a SAS file all you have to do is change the extension from that CSS to SCSS then once you do that you can either start writing SAS from there or you want to clean up the code a little bit that's what you want to turn into SAS you can do that and then start writing SAS from there and then just keep a SAS file for your partials as well so sometimes the SAS file can get really large that's the beauty of partials you want to import your partials so if you have your forms layout and you want to pull that in just do an add import right there but try to keep it organized like in a previous slide that I showed you that was downloaded from underscores everything was very organized and that sheet was the only sheet the only style the style that SCSS was the only file that was getting compiled and the only one that was getting uploaded to the server so just make sure you organize everything very well so SAS is going to allow me to break up my CSS into smaller little modules or whatever and that SAS file that you already have let's say a big chunk of it is about your forms layout and how you want your forms designed you can take that and put it in another SAS file and name that forms layout or something for that nature with an underscore and then you import that into the styles file any other questions I believe the lady up here had a similar question are you committed with any reverse engineering tools that would reverse engineer a compiled SAS file at least into a readable CSS file I am not so this young lady said you can use SAS so I'm not familiar with how to reverse it back from CSS to SAS that's the question right yeah I'm not familiar with how to do that but they're probably a plugin for that yeah but she said there's a SAS command for that so definitely check that out I've never worked with that go ahead okay so what's your favorite browser the Firefox so Firefox does have it so you go into the developer mode the Firefox in that developer section it's going to ask you if you want to use SAS or generate SAS and you know what let me see it's not my computer I'm sorry but basically this is the Chrome version so the Chrome version you see the little settings right there you click that and it's going to give you an option to have a checkbox and what it's going to do is allow you to instead of calling that when you right click and do the expect element and it's referencing that CSS file it would then just reference that SAS file and you can do your edits right up in there because now you know what learning is going to be on the SAS file because you're not touching the CSS file anymore ever yep changes just like you do exactly exactly just like you're doing with your regular CSS flow any other, go ahead yes there's like really great tasks that we'll do that you can go over and watch the file for changes and then just compile it on one save it's really really nice okay I use all of them it just depends on what you're doing and it is the most important thing they're kind of like like you were saying earlier like how much do I need to do what I need to do and do it in real time and all of these things like error reporting misplaced on this line I encourage to write your board they want to follow up with this yeah, Co-Kit does that as well to give us nice error reporting thank you for that any other questions oops no other questions thank you so much I swing it out the slides