Mixin' it up with SASS - CSS Tutorial

- [Instructor] Hi, this is Chris Converse and in this episode we'll take a look at creating our own mixin in SASS. Mixins work a lot like functions in languages like JavaScript and PHP and many others. They allow us to define some CSS properties, and then reuse those properties for any number of other CSS rules in our document. Now, if you'd like to follow along with me, download the exercise files and make sure to have to have a compiling tool running as well. So your SASS file will be converted into CSS. Now once you extract the exercise files, you'll find a style.scss file, this is our SASS file. This file will get compiled into style.CSS, this is the file that the browser needs. There's an index.hmtl file, an images directory with a banner graphic, and in my particular case, I have a codekit file here. Codekit is the compiling software that I'll be using, but you can use any compiling software that you have that can convert SASS into CSS. So, your particular files will not have this Codekit file. So, to begin our project, let's open index.html in a text editor. Once you have the html file open, up in the head area, you'll see we have the link to the style.css file. If I scroll down here, inside of the body element we have a header element and a main element. Inside of the main element we have an article element and an aside. And inside of each of the article and aside elements we have some anchor links with the class of btn. In an earlier episode, we took anchor links and converted them into buttons using CSS. So what we're going to be doing in this episode is sharing some properties between the buttons that are inside of the article element and the button that's inside of the aside element. And if you'd like to preview the layout we're going to be working with, you can open index.html in a browser. Once this is open, we can see those buttons showing up here. So we have one after nutrition, one after preparation, and one over here after organic in the aside. So to begin creating our own mixin, let's go back to the exercise files, let's open style.scss up in our text editor. Now I'm using the Sassy CSS syntax of SASS, so it looks a lot like regular CSS. Let's scroll down to the bottom here. Let's find the anchor tag with the class of btn, and what I want to do is reuse all of these properties in a mixin. So let's come down here and select all of these properties. Let's choose edit, and then cut these to the clipboard. I'm gunna come in here and just delete that rule, and lets start by creating a SASS mixin. And we do that by typing an at symbol, typing in the word mixin, then a space, then we're going to give our mixin a name. We're going to call this button_normal. Then we're going to add a beginning and ending parentheses, then a space, then a beginning and ending bracket. So again, if you're familiar with JavaScript, or other similar languages, this will look exactly like a function in those languages. So now, inside of these brackets, I'm going to come in here and paste all of those properties that we originally had in the a.btn selector. So with these in place I'll hit save. Now if I go back to the browser and hit reload, all of those properties that converted our anchor links into buttons are no longer being applied to our layout. So we just see standard anchor links here. So now what we need to do back in our CSS, is apply this mixin to some CSS rules. So after the mixin, let's hit a few returns, and let's first target the anchor links with a class of btn inside of the article element. So I'll type article space a.btn, then a space, put in our brackets. Let's split this open and now to use the mixin, what we need to do is use an at symbol, type in the world include, then a space, then we need to reference the mixin name. So let's come up here and select button_normal. I'll copy that, come down here and paste it. Let's put in our beginning and ending parentheses, then a semicolon. So, with that in place, let's copy that entire rule. Let's hit a few returns, let's paste it down here. Let's change article to aside, and we'll still reference the same button_normal. So at this point, let's hit save. Our SCSS file will be compiled into CSS. Go back to the browser, we'll hit reload, and now we can see the styles that we had before. What's happening here is all of the rules inside of the button_normal mixin are being applied to article a.btn and aside a.btn. So now that our mixin is working properly, what I want to do now is customize some of the properties when we call the mixin. So the styling in the article area can be a little different from the styling in the aside. So to do that we're going to add some parameters to our mixin. So let's come up here to our mixin, inside of the parentheses. So I want to send three properties, something so we can change the color of the text, the color of the background, and the color of the border. So using SASS variable, which start with a dollar sign, we're going to type a dollar sign, type in the word text, then a comma, dollar sign background, then a comma, then dollar sign border. Now, you can choose any name you want for these variables, but I'll just keep these as text, background, and border. So now inside of the mixin, I'm going to add a property at the top called color for the text color. Put in colon, then a space, then I'll come up here and copy the text variable, we'll paste that after the colon, then hit a semicolon. Next lets come up here and select the background variable. Let's come down here to the background color property, let's replace the pound sign and three Fs with the background variable. And then finally, we'll come up here, select the border variable, and we'll replace the three Fs in the border property with that variable as well. So now that our mixin is ready to get custom properties when we call it, let's come down here to the article space a.btn and let's send in those particular properties. So for the text color of buttons inside of the article, let's type a pound sign and three Fs, so the color will be white, then a comma, now we'll set the background color. So that's going to be a pound sign, BC for red, C4 for green, and 28 for blue, then a comma and we'll use the same color for the border. Let's come in here and copy that, and then paste it after the comma. So these three values will be sent along when we call the button_normal mixin. And so now let's come down here to the aside, it's space a.btn, and let's send three properties down here as well. So, for the text color, we're going to set pound sign, 72 for red, B0 for green, and 03 for blue, then a comma, then a pound sign and threes Fs, for white for the background color, then a comma, then a pound sign and three Fs for the border color. So now with these in place, let's save our file. Now let's go back to the browser, let's hit reload, and we'll now see that the buttons in the article element are styled just a little bit differently than the button inside of the aside. However, they do share the common properties such as the display type, the padding, the border radius, and so on. So now that we have some customized properties, let's go back to our SASS file and let's create a second mixin for the hover states. So type and at symbol mixin space, type in button_hover, put in our parentheses, put in our brackets. Let's split this open. The parameters for the hover state are just going to be text and background. So I'm going to come up here and select those two variables from the button_normal mixin, let's paste them down here. Inside of BTN hover, let's add a property of color, we're going to set that to our text variable. And then the next line, we're going to set background color and we're going to set that to our background variable. So these are the two properties we're going to use for the hover states. Now, to apply the hover state to our rules, we're going to use nesting, which is part of SASS. And we covered this in an earlier episode as well. So let's find article space a.btn, let's hit a return. We'll add some extra lines here. Now for the nesting, we're going to use an &, then we're going to use colon hover and a space. Put in our brackets, and then inside of here we're going to call the button hover mixin. So we'll type at symbol include space button_hover, put in our parentheses, semicolon. And then inside of the parentheses, for the text color, we're going to send black, so that's pound sign three zeros. And then for the background color we're going to change it to white, so put a pound sign and three Fs. Let's come up here and select this nested hover rule. Let's come down here to the aside space a.btn, after we call the button normal mixin in here. Let's paste in this hover selector. And then for the parameters of button_hover, let's come in here and change black to white, so that's pound sign and three Fs. And for the background color, in the aside, I want to use a semi-transparent color. So instead of a hash symbol, we're going to type rgba then we're going to put our beginning and ending parentheses for the rgba, and then inside of the parentheses we're going to set 255 for red, comma 255 for green, comma 255 for blue, then a comma, and then we're going to put point three for the alpha. So we'll get a semitransparent white background color on hover for the button inside of the aside. So with that in place, we'll hit save. Let's go back to the browser, we'll hit reload, and now we can hover over each one of these buttons and we'll get a slightly different style for the hover state just like we have a slightly different style for the normal state. And then one last feature I'd like to add is to add a pseudo-element to each one of the buttons to add a right facing arrow. And we can use the nesting technique that we just used for the hover states in the main mixin as well. So back in our SASS file, after background color, I'll hit a few returns. Again, we'll use an & to create a nested style. Then we're going to use two colons, type in the word after to create a pseudo-element. Put in our brackets, split this open, and then inside of this pseudo-element we'll start with a content property. Set this to two ticks and a semicolon, and inside we'll use a unicode character for a right facing arrow. So we'll start with a backslash, type 25ba. Next property we're going to set font size, we're going to set this to point eight Ms. Next property is going to be padding left, we're going to set this to six pixels. And then finally, we're going to set the opacity, we're going to set that to point six five. So, with these in place, let's hit save again. Let's go back to the browser, let's hit reload. And now we'll see that all of the buttons now have a pseudo-element with this right facing arrow applied to not only the buttons inside of the article, but the aside as well. And if you'd like to see what's happening in the final compiled CSS, let's go back to the exercise files, let's open style.CSS, let's scroll down to the bottom, and you can see the result of all of the properties being assigned to the a.btn, both inside of the article and aside elements, by referencing the mixin in our SASS file. Now, if you'd like to learn more about using SASS, or LESS, I'd recommend taking a look at Joe Marini's course entitled, "CSS with LESS and SASS" which is also available here in the library. And so with that, I'll conclude this episode, and as always, thanks for watching.