How I became SASSy (Part 2)

This article is a sequel to How I became SASSy (Part 1). Yet to read the first story or know how you can become SASSy too? you are just a click away to get you started on your journey to becoming SASSy

You can become SASSy too

So, in this article, I will be discussing the last 2 basics of SASS which I mentioned in How I became SASSy (Part 1).

Remember, Things you should know before learning SASS:

1. HTML
2. CSS syntax like Selectors, Classes, ids etc
3. Basic programming syntax like Variables, code-block etc

MIXINS IN SASS

Let’s say in our web project, we want to add the same styling to multiple non-dependent CSS Selectors and have the styling combined with these individual selector’s CSS properties, how we do this? We use MIXIN.
Mixin is a block of code containing a set/group of CSS properties, which is to be reused throughout your website. In computer programming, a block of code (otherwise code-block or block) implies a structure delimited by curly brackets/braces {}, which has a set of codes written within it.

How Mixin Works

1. Creating a Mixin: The at-rule (@) is used in creating a mixin, that is, @mixin, followed by a space, our mixin name and then curly brackets {} with some CSS properties written within the brackets.
2. Using a Mixin: Mixin will only work when used after creating it. To use the Mixin created, use @include followed by space then the name of the mixin created in step 1.
3. Parameters can be passed to Mixins as well in the form of variables.
   Hint: Add parenthesis () after mixin-name when you pass parameters, that is you have, @mixin mixin-name() { some CSS here }

So I’ll be adding Mixin to my previous project. I want to give the same stylings to multiple class selectors then combine the stylings with each Selector’s CSS properties

Adding Mixin in SASS:- The Beginning (Creating mixin)

Adding Mixin in SASS:- The End (Combining mixin with other CSS properties)

From what we have above, Let’s analyze what’s happening in steps from the first-to-second video:-

1. I created my mixin using @mixin multipleClasses {} on line 29, where multipleClasses is my mixin-name. You can use any name of your choice.
2. Next, I added some CSS within the curly brackets.
3. Then to use my mixin, I just used the @include on lines 37 & 41 (first video), followed by space, then my mixin-name multipleClasses.
   Note: I didn’t use parenthesis () in my code since it’s not necessary.
4. Finally, I added other CSS properties separately to my class selectors combining with my mixin (second video).

AND THERE YOU HAVE IT, USING MIXIN IN 4 STEPS

IMPORTING FILES IN SASS

Now remember in How I became SASSy (Part 1), I mentioned that any duplicate SCSS files (now in your CSS folder with .css extension) must be included in the HTML file required.

But what if I just want a single CSS file in all my HTML file, what do I do? Let’s Get Started…

Importing SASS files

Importing SASS files

From the videos above, let’s analyze what’s going on in steps:-

1. Initially, we can see 2 CSS files in the index.html file. The main-styles.css file contains general CSS for my project while the sassy-styles.css file which is the duplicate of my sassy-styles.scss file contains my SASS codes. Note output on the browser in the first video
2. Next, I created 3 files in my SCSS folder. The variables.scss file contains variables to be used in my sassy-styles.scss file, the mixin.scss file contains mixins to be used in my sassy-styles.scss file and lastly, the main-styles.scss should have general CSS properties.
3. Next, go to Prepos application and uncheck the Auto Compile or Process Automatically option by clicking on each of the newly created SCSS files. This is so that we don't have duplicate files in our CSS folder.
   Note: I didn't uncheck the sassy-styles.scss file because I want to add only its duplicate CSS file to my index.html file.
4. Next, move all variables and mixins declared in your sassy-styles.scss file to variables.scss and mixins.scss files respectively. Also, move the content of the main/general CSS files (which I moved from the main-styles.css file formerly in my CSS folder) to the main-styles.scss
5. Then, import these 3 newly created files into sassy-styles.scss file. So here, I used the @import, followed by space, then type the name of each of your new files within the quotes, followed by a semicolon on separate lines for readability.
6. And Lastly, remove the link to your general CSS file(mine is main-styles.css) from your HTML file (index.html from the video).
   Note again the output on the browser in the second video after modifying our sassy.scss file is the same as before modifying it.

And that’s that about what you need to know about Variables, Nesting Styles, Mixins and Importing Files in SASS. To learn more on SASS, you can check this documentation.

Thank you for reading. I hope you have gained one or two thing(s) here. If you have questions or recommendations, you can drop in as a comment and be sure to get it attended to as soon as possible.