Welcome back to the final post in this series on JQuery. Up to this point, you have learned some of the methods in the JQuery library and their use cases. You have also learned how to use the typeahead.js JQuery plugin to add a cool autocomplete feature to a search box. Now, as we wrap up this cool little app that allows us to access stock information we will add some additional style to the page. In our last tutorial series, we briefly introduced SASS and how we can use its nesting and variables features to create our CSS file. Today we will briefly touch on the topic of SASS mixins and their use cases. So, let’s get started.

Below is SCSS file that we will be working with. You should already have SASS downloaded on your computer from the previous tutorial. Take a look at the SCSS file below. We begin by making the mixin declaration. In this case, we are using a mixin that takes a list of arguments to set the padding. Now, you can also declare a mixin with no arguments, and just write regular CSS. The cool thing about mixins is it allows you to write a block of code that you can use throughout your application. So, instead of writing the same CSS over and over again, we simply declare a mixin and the call it by using the @include syntax.

In our mixin example below, we are will pass arguments into the mixin that will set the padding for that element(s). Now, this is a bit overkill, and this example is merely for demonstration purposes. Take a look at line 28 below. Here we use the @include syntax to call the mixin and pass in the arguments 6px and 12px. This will then set the padding-top and padding-right to 6px and 12px respectively. On line 38 we again call the mixin and pass in a different list of values to set the padding on the table headers.

And that is our basic introduction to SASS mixins. Go ahead and mess around with them to style the page in any way you see fit. 2018 has been a great year for learning code. I hope all of you have enjoyed this year’s material. I look forward to 2019 and all the things that we will learn together. Comment below with your questions or thoughts and remember to share this post on your favorite social media platform. Thanks for a great year, and I will see you all in 2019!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s