Now that we've seen some of the basic features of Sass, let's move on to some more of the advanced features, and we'll start by looking at mixins with arguments. And you can see here in the Snippets file, I've scrolled down to the Advanced Sass section, and this is Mixins with Arguments. I've got my SampleDoc open right here, and let's go ahead and open up the mixargs_styles document, where we will build our example. Let's begin by copying over one of the snippets, and it's this first one right here, then we'll paste it in.
So, here I have a mixin directive, and I'm creating a mixin called customBorder, and this mixin takes three arguments. So I've got width, color, and style. And then inside the mixin, I've got a border definition with a nested syntax, so this will become border width, border color, and border style. So I am going to save that, and let's go copy the code that uses it, and we'll paste.
This is like using any other mixin, except that in this case, I get to pass parameters to the mixin, which helps customize the way the mixin behaves. So, in this case, I've got my definition, and down here, I have my include customBorder, but here I'm passing in the values that I want the mixin to use, and this is really useful, because in this case, it allows me to customize the mixin with values that may change based upon where I'm using the mixin. So rather than defining a mixin with fixed properties and values, I'm able to customize it further.
I'm going to go ahead and run this; go ahead and save it. And remember, we have to go to our command line interface, and tell Sass to start watching this folder to compile the CSS. So we'll do that right now. Here we are in the command prompt. I'm going to type sass --watch, and just like before, we're going to say the source is in Chapter 5, and we want the destination to be Chapter 5 as well. The path to the Exercise Files folder might be different for you. Just get to wherever the root level of your Exercise Files folder is, and type this statement.
You'll see that Sass is now watching for changes, and it's already converted the SCSS files in the directory into CSS. So let's go back to the code now. We have our Sass code here. Let's take a look at the generated code. And you can see that inside the mixin, it got replaced with border-width, border-color, and border-style. Close that. Go to the document, and include that style sheet, and we'll save, and let's bring it up in the browser.
And you can see here that, sure enough, the paragraph that we are applying the style to has a dotted blue border that's about 3 pixels wide. Let's take and look at another advanced feature of Sass mixins. We'll go back to the code. Let's copy the other snippet in, and we'll paste that over here. This creates a mixin called customBorder2. The difference between customBorder and customBorder2 is that in customBorder2, I'm declaring the parameters to the mixin, but I'm supplying default values.
So if I include this mixin without giving any parameters, it will use the default values that are declared here in the parameter list. So, for example, if I don't tell it what width to use, it'll be 1 pixel; if I don't give it a color, it'll be black; and if I don't give it a style, it'll be solid. Let's go ahead down here, and change this to use it. So we'll say customBorder2, and let's just get rid of that; here we go. So now we're calling customBorder2 without giving it any parameters, and let's make sure that compiled correctly.
Looks like it did; looks like a change was detected to the mixargs_styles.sass code. So let's go back to the code now, and let's look at the generated CSS. And we can see that in the generated CSS that, because we didn't supply any parameters, the default values were used. So let's close this, and let's bring this up in the browser. And you can see that the default values were applied. Let's go back to the code, and this time let's give it some values. 3 pixels, blue, and dashed.
There we go. We'll save. The generated code now is using the parameters we gave, and we'll go back to the document. Let's run it, and sure enough, we have a 3 pixel, blue, dashed line. Using Sass, you can define mixins that take arguments, which allow you to customize the way mixins work, and this is really cool, because instead of having to define mixins that have fixed properties, you can define mixins whose properties are set, but whose values can change over time, or depending on where you're using them in your project.
The first section focuses on LESS (Leaner CSS) and how it can be used on both the client and the server. The lessons show how to work with variables, mixins, nested rules, and other features to easily create maintainable CSS.
The second section introduces Sass (Syntactically awesome stylesheets), which contains many of the same features as LESS, along with a few new ones. Joe also compares and contrasts the two tools, and explains how your platform and needs may influence which tool you choose.
- What are LESS and Sass?
- Using variables in your CSS
- Working with reusable and parameterized mixins
- Implementing nested rules
- Combining CSS rules with operations
- Using the built-in functions in LESS and Sass
- Controlling the CSS output formatting
- Importing external files