Hello, everybody. Welcome to another episode of your website engineer podcast. My name is Dustin Hartzler. I’m so excited to be here with you today because we’ve got another great topic in line for you today. Today we are going to talk about how to give our WordPress site some sass, and that’s a little play on words that we’ll get to in just a minute. First off I want to let you know about the announcements that are happening around these parts and the main thing is on February 6th at 10:00 a.m. eastern – that is going to be when my next webinar is going to be. That’s going to be February’s webinar.

We’re going to be talking about how to edit your premium theme the right way. So these are premium themes you may have purchased at another theme shop or maybe you’ve paid for a custom them or what have you or any time that you’ve procured a theme and you started using it on your site and you want to make edits or changes to the layout, the content, the colors, the style – anything like that. I’m going to show you the right way to do that. There’ll be some simple ways to do that and there’ll be some more difficult ways and it’s going to just highlight the best practices, the best ways to do these, types of, things.

Again, I said that was on February 6th at 10:00 a.m. eastern. You can register today over at yourwebsitenegineer.com/webinar. So – and just last month I did one. I was really excited about a webinar and I got the series started back up and it was just so much fun to get on the – on Google hangout is basically how we handle it and just being able to answer questions live, kind of, do a demo and walkthrough and showcasing some of the ways I do things. It just got me really excited and so I’m really excited to do 12 of these this year. I’m going to try to do one every single month and we’re one twelfth of the way done.

In a week or so we’ll be two twelfths or one sixth of the way there. So that’s the story on the weekly – or the monthly webinars that are happening. One other announcement is that we are looking for speakers for word camp Dayton. Word camp Dayton is going to be happening on March 20th and 21st right here in Dayton, Ohio. And of course we’re also in Dayton – WordPress happened – and so if you're interested head on over to 2015.dayton.wordcamp.org and we are looking for speakers so if you’ve never spoken in a word camp or you're an experienced pro and you’ve spoken at many different events please apply and this is a perfect place.

We’re looking for people to really want to work on their craft of speaking and teaching people about WordPress. We’re looking to have a lot of students and getting them excited and teaching them about WordPress as well. So if you're interested head on over to 2015.dayton.wordcamp.org. The next section of the show is always is there a plugin for that? And again I have another fun plugin to talk to you about today and it’s one that you may have used before or most likely haven’t. It’s one that hasn’t been downloaded that often. It was updated just today or yesterday and so it’s a very well updated plugin.

It is written by Pippin Williamson and he is the genius behind quite a few different plugins that are out there and this one is called Batch Comment Spam Deletion. And basically what this is, is this allows you to batch process all your spam comments that you have on your WordPress site. So if you ever try to delete those – if you had hundreds of thousands of them there's no delete all option or it’s – even if there is a delete all option it just crashes your server because it just takes so many resources. This gives you the ability to go in and you can batch delete like a hundred or so at a time.

So you could do hundreds or thousands or whatever and you – it doesn’t kill your server because it does it in a logical manner and it knows what to look for and it just – it does such a much better job. So that is the plugin. If you ever acquired a website that maybe somebody hasn’t been using like kizmit and they’ve got all these spam messages and they just want to get rid of them you can do it this way. You can use the Batch Comment Spam Deletion plugin or you can use – you could – of course you could go in, do a little custom query in the seagle database and then just delete them from there. But this is the one I recommend.

There will be a link in the show notes for episode No. 217 for this plugin. All right. So in today’s episode we’re going to talk a lot about sass and what that is and we’ll dive into that in just a second, but I want to just highlight the survey that I did about how I could improve the show. There were quite a few people that were really interested in a little bit more of high technical details just – not really developer level, but they're just a little bit more detailed and just – people – there's all different levels of experience – WordPress experience that listen to the show.

So this one is I think a – going to be a little bit more on the developer side, but definitely everybody can take a little bit away from it, whether it’s picking up a little bit about CSS that we’ll talk about or a little bit about sass or pre-processors or some of the other things we talk about. There's good information here for all users of WordPress. And so what I wanted to start with is just talk to you about CSS for just a minute and then we’ll get into pre-processors and then we’ll actually talk about sass and we’ll talk about the program that I use to, kind of, compile sass. Don’t worry. We’ll get into all of these different things.

So CSS stands for cascading style sheets and that is a way that we can style our website so that all elements that have the same classes or IDs look exactly the same. So if you’ve ever tried to load a WordPress site and your style sheet doesn’t load it’s basically just all text and images depending on – there's no backgrounds, there's no color, there – it’s all the default standard web stuff – a white page with black text and blue links. That’s, kind of, the standard default way that WordPress loads and you need a style sheet to start styling these things.

And this is what I think is the hardest part about building a website is actually building out these style sheets because there's so many different elements and there's so many different things you can do and this is why almost it’s easier sometimes to buy a prebuilt theme because those have all of the – the CSS is already built in. There's a lot of features. Everything’s always built in and so it doesn’t take nearly as long to develop a theme from scratch. So if you’ve ever used CSS you can – you know it’s, kind of, fun.

You know it’s – kind of, need to give something a class and then you give it a border and you see what that looks like and then you give it a little padding. You give it a little margin and then you maybe do a border around it. You change the border to – the thickness just a little bit more thickness, maybe a different color, then you give it a background. There's a lot of different tweaking to get everything to look perfect in your CSS – in your CSS code to make your website look perfect. And so even though that can be fun it’s very tedious. There's a lot of work and the bigger the style sheets get the more complex and harder they are to maintain.

Just think of the last website I looked at probably had thousands of lines of CSS code and those are all different pieces of style elements that control different things. And so what a preprocessor – basically you can use a preprocessor to help you generate your CSS faster, make it easier. So a preprocessor is basically a computer program that modifies data to conform with the input requirements of another program. And so that’s, kind of, the generic Wikipedia definition, but basically what that is, is – how this work is it basically means you can write code in one way.

You can write it in one way and then send it through a preprocessor and it takes – it jumbles it around and makes it into CSS code. So for our example we are going to talk about sass and sass is a programming language that makes it really a lot easier to generate CSS code with a lot of less keystrokes. That’s the big thing. For somebody like me who goes in and buys a theme and then starts tweaking it and doing some things sass doesn’t really help a whole lot because I’m just adding things here, small things there.

It’s not quite as big a deal, but if you're starting a project completely from scratch it really saves you a lot of time because there's different things you can do – and we’ll talk through all of the different pieces that make writing sass code much faster than writing CSS code. So some of the other things that you can do and the nifty things that come out with sass is it gives you the ability to write code in separate files and to write it longhand, if you will, or shorthand, if you will, and then it compiles into – it compiles into CSS syntactically correct code.

And another really cool thing is you can actually – you can compile it to be compressed form so it basically takes out all spaces and it’s the smallest possible file so it takes the least amount of time to download to your server and then once it’s there then it’s just that much faster on the website for people to pull up your sites and everything – just speeds things up a lot. So what it works is – or how it works is there's some different things that are good when it comes to CSS or sass. And so some of the cool things that you can do is you can use variables in your CSS code.

So I guess let me step back a second and say that CSS and sass files can be almost identical. If you have a theme that’s out there that already has CSS installed it’s basically – it’s got one CSS file you can actually rename that to SCSS and basically then you can start making some of these custom sass tweaks to your CSS file. And what are some of these tweaks? Some of these tweaks can be variables. This one is really cool. This is probably one of the biggest features that I like using sass is because of the variables.

And so in the syntax for sass we can basically say that – you put a dollar sign in front of a piece of text and that defines it as a variable and so one of my favorite ones is to do dollar sign primary dash color. And then you can set that to whatever you’d like so you can say three, three, three, or F, F, F, or whatever – you put a hexadecimal code in there. And then any time that you want to call that exact color. Then you just – from there you go ahead and you just put in color in your – say your body tag. So you put body and then you would put color, colon, and then you put primary color and that’s all you have to put.

And then if you want to change it from blue to red you just update the sass at the very top. You update those variables and then it changes throughout once your file has been compiled. It’s really pretty cool. It really is a neat way to really save you some time. You can do primary colors, you can do secondary colors, you can say your fonts – all by font stack is going to be you know what ever. So you don’t always have to type out the three different fonts or Helvetica and then Sans Serif. You can just say font. You're going to have that be a variable and you can say 100 percent and then variable font if you like so that is really cool.

You can just do that and it automatically generates and it automatically works. It’s really, really cool. And so that’s going to save you – it’s more along the lines of those variables are going to save you in the long run because you don’t have to go back and look up that hexadecimal code. What was that color orange that I used before? Was it FF6600 or was it F6 – whatever it was? It takes you a while to go back and try to figure out what that is so you can always do – you can load up the colors that you're using most often. You can say variable blue, variable red, variable orange.

You can set those up with the hex color so it’s easier to remember and it’s – it’s okay to do it that way, but you probably want to do more like this is primary color one or color one, color two because if you change that orange to a different color then all your variables will say they're orange, but they're really blue and then it really makes things confusing. So variables are one of the really cool pieces of sass that make it really awesome to use and help you generate your code faster. Another thing that you can do is called nesting.

And when you write HTML you probably notice that there's been a clear – there's always nested visual hierarchy and on CSS there isn’t. So when you're building a nav menu there's your nav class and then your UL class and then your LI class and then your A class. So all of those are, kind of, built in when it comes to your div tags. But in CSS you normally have to say navs, UL, nav LI, nav UL, LIA – whatever that is.

You have to write all of those out, but in CSS – or in sass what you can do is you can say – basically you can say nav and then you can open the bracket and you can say – if it’s a UL – if it’s a nav UL then you can add these things and if it’s a nav LI then you can do these things. And you basically nest all of these and there will be links and examples in the show notes here for this episode No. 217 so you can take a look and you can see what exactly I’m trying to describe during this podcast. But basically just think about it as you're basically saying that – okay.

If it is a nav and then anything that – then you can have all three of the nav combinations inside the nav bracket so you don’t have to write nav each time in front of each CSS element. And then it just automatically generates and it spits out after it’s done compiling the right syntax for your CSS so that’s pretty cool. That’s a cool way to do that.

Another thing you can do is you can do an import statement and this is really fun because it’s really nice for me to organize my CSS into different buckets so I know where things are, whether it be background stuff or maybe sometimes I have form information or sometimes I just have a miscellaneous file where I stick different stuff that maybe I’m modifying some of the output of a plugin or something like that. I have a miscellaneous file or sometimes I have headers in an area. Then that in my mind helps me organize. Okay. This is over here in this file. Let me go in there and I can figure it out.

And with the import statement you can basically say I’m going to import this information from a different style sheet and then this is going to load. So basically you can say okay. I’ve got these five style sheets. I want them to load into this one document and compile them into style.css and you're off to the races. So that works really, really well. Another one of the big, powerful things with using sass is what's called mix ins. And sometimes CSS is very tedious to write, especially with the C or the CSS3 new prefixes that are out there and the vendor prefixes that exist.

But basically it makes you – it allows you to do CSS declarations that you want to reuse throughout your site and you can even pass variables through and whatnot. So one of the info – one of the ones that comes to mind is the border radius. If you ever do border radius you have to do – you have to define the web kit border radius, you have to define the MS border radius, the MOS border radius, and just regular border radius for other devices and whatnot. So – and then you’ve got to define what those radiuses are and all those different things. And so you can set this up as a mix in.

And then what you have to do – when you do a mix in you can basically just say – you can say include the border radius and throw in a variable and it automatically generates exactly the right code. This one’s really hard to explain the mix in, but basically it gives you the way to – instead of having to try to figure out – okay. How do I do border radius or how do I do the gradients with all the different line items to get the gradient correct? In every single browser you can set these up as mix ins so it makes it very simple. You add one line instead of the four, or five, or six lines that it takes to get the right amount of code into the area.

So mix ins are really cool and that’s probably one of the biggest features of one of the – the pieces that makes it so much easier to write CSS. You're writing a lot less code than – instead of maybe four lines of code now you're writing one single line of code, which really saves you a lot of time when you're trying to crank out some CSS very, very quickly. Another thing you can do is what's called extend or inheritance and this is another one of the really neat, useful features of sass. When you use the extend feature it lets you share a set of CSS properties for – from one selector to another.

It helps you keep your sass very DRY and DRY stands for don’t repeat yourself and so that makes it very, very easy to make sure you're not repeating your code over, and over, and over again. So for example maybe you have a default way that messages displayed on your website. So maybe you give it a border, padding, some color, stuff like that, and then maybe your success message – you want all of those same features, but you want the border color to be green instead of the normal grey border color.

And so basically you can declare – you have the – you have your message class, but then you can say the success class is going to extend the message class. So it means basically take all the properties of the message class and then we’re going to also add the border color as something else – as green. And so you can do that so you're not having to write out – oh. We’re going to do the border again, the padding gain, the color again, and then you do another border color – green. And so it just saves you that time from going up to the top and copying and pasting and all that different, sorts of, things.

Again, there’ll be a link in the show notes and you can see examples of what this looks like. Another cool thing is you can do math inside of sass and you're like why would I want to do math in a style sheet? Well, it’s really pretty cool because it helps you create those responsive widths so you can say I want the width to be 600 pixels divided by 960 pixels and then times 100 percent would give you a percentage of the width. If you wanted to do a font size or any, type of, math question you might want to do – it’s best used for some, sort of, percentages on widths and container sizes and so that’s something to think about.

And that’s a very easy example, but you could also do – oh, I want to take the font size – if it’s on this size screen I want to cut it in half or I want to make it twice as big so it’s easier to see or whatever. So there's not a lot of examples off the top of my head that I can say what you can do with the operators, but that’s another thing that you can do. You could also do some really cool things about – I forget what this is called, but you can change the hue of a color. Say for example you change your primary color and it is a grey. You can then say, oh.

I want to change this. Maybe it’s a border and I want the border to be 20 percent darker than the color and it will automatically generate the correct CSS that you need to have that color be the right color. Something that – it’s the same color, but it’s darker so that’s another thing that you can do with sass. And so sass is not the easiest of things to learn and set up. The very first time that I did it I had to do some gem install through ruby on my – through my terminal and I was just – I was confused. I didn’t know how to use it and then you had to set up a watch so you could watch a specific folder on your hard drive.

So basically how I would set it up is I would set up the desktop server. I set that up locally of course and I’m running that and then I would create a – I would create a sass folder inside of my WordPress theme and then from there I would go in and I would – from there – once that theme was set up then I would go and I would put all my sass files in one area and it would generate one. I’d have to tell – I’d have to tell compass to watch and it was really, really hard. I can't even really describe it and how tedious it was. Well, in the last few weeks I found this really cool program called Code Kit and Code Kit makes it – life extremely easy.

It’s basically like steroids for web developers. That’s what it says right on their website. It’s a $32.00 program. It does cost a little bit, but some of the features are just absolutely amazing. You just drag in your theme file and it starts watching for sass. And any time you make a change in a sass file it automatically regenerates your CSS, which is really cool. So you make a change, you save it, it regenerates it and then it even refreshes your web browser so you don’t even have to do anything.

The coolest part, too, is it will link to all your mobile devices so even if you're running and testing a local dev site you can push and you can say update and it – every time that you hit save it updates all your devices. It’s, kind of, neat and it’s, kind of, creepy at the same time when all your devices around you start flashing. So Code Kit is probably the easiest solution to get ready. What you would do is you would install WordPress locally on your machine somewhere and from there you can – you could start watching a particular folder.

Every time you made a sass change then it would update and it would, kind of, recompress and re-output a style – that CSS file and from there then you could – and then you could refresh your site and you could see if it was working. Now, if you don’t want to set all this up – you want to try sass – just start tinkering with it and playing with it – there is a WordPress plugin in the WordPress repository. It’s called WPSCSS and you have the ability there to generate some sass files and queue them and get them all working on your site. So this was, kind of, a high level overview.

We’re just – it’s, kind of, hard to do a really in depth overview of sass via the audio because there are so many things that we talked about. But go to the show notes for episode No. 217. You can see exactly some of the code that I was talking about – what it outputs – things like that. And then this is something that if you're really interested and you're – you really want to check out and really want to learn more about sass you can head on over to sass.lang – L-A-N-G – dot com and from there you’ll be able to just go through and learn some of the sass basics and you can read their blog there – how to install it.

If you want to go through the hard way of installing it – or you can go head on over to Code Kit and they actually have – I believe they have a trial that you can use and so you can go ahead and try it and take it for a spin. So that’s, kind of, in a nutshell the big idea – the thought behind what happens. And I’m going to wrap the show up with that. Sorry it was a little bit more technical based, but I just started using sass again when – I’m still working on building out my new website and I’m playing with it and I’m just like I need to tell somebody about it and you're the one that I told.

So that’s, kind of, where the idea came from, plus I wanted to get a few more technical shows in and just to keep everybody on their toes and help make sure that everybody is learning about WordPress each week. That’s all I have for you this week. I’ll talk again to you next week. Take care. Bye-bye.