🥽 Beta testers needed! Stay up to date with the latest news from CTRLS.DEV

5 SASS Mixins for Your Next Project

Use these SASS mixins to generate and create some utility classes for your next project.



Recently I have started a new SASS project on GitHub and wanted to share a few mixins that may help you with your next development project.

The project is called SASS-Snippets and it is basically a collection of SASS mixins that could help you to generate and customize your own CSS framework.

You can easily customize, extend and regenerate all the mixins using your naming convention and needs.

I will probably publish another post with more details about the project, but at this moment I am still in the beginning phase. Currently working on an implementation for border, background, flexbox, grid, and typography mixins.

If you are interested to see more and follow the progress of this project go to its GitHub repository and give it a start or watch.

Note: Full version can be found in the SASS-Snippets source folder, the examples below are trimmed and only for demonstration purposes.

So, here are 5 of the mixins that you can incorporate into your next project.

Containers & Columns

The first example consists of 2 mixins that can help you create a very simple grid for your project.

You can easily customize the output CSS classes for each of the mixins by-passing your own naming conventions (e.g. instead column you can use col) and change the values (e.g. change medium container width from 768px to 992px).

Spacing

In this second set with mixins, you can control the spacing of your HTML elements. They are pretty much the same but one is used for margins and the other one for padding.

Note: With a few little changes, you can put together the 2 mixins into 1.

Again you can easily customize them to meet you needs, use rem instead of px.

Subscribe to our Newsletter* if you find our content useful and would like to receive regular updates with the latest posts.

For example, if you set the unit to rem, step to 1, from 0 and through to 10, will create a collection of CSS classes with padding or margin from 0 to 10rem for all top, right, bottom, left, etc…

Objects

Lastly, this mixin will generate all need CSS classes for the object-fit and position used to specify how an <img> or <video> should be resized to fit its container.

How to use the SASS mixins?

If you are reading this article you may already know how SASS works, but I will include a brief version of how to use the above mixins.

  1. Create file named styles.scss
  2. Add any of mixins inside this file, for example:
    @import ‘container’;
    @include container();
  3. Run sass –watch . where styles.scss is (assuming all the files are in the same directory)
  4. And this will generate styles.css with all the classes for you.

Hopefully, this was a useful introduction and these mixins will help you with your project.

Again if you want to follow the SASS-Snippets project go to its GitHub repository and give a start or a watch.

‘Till the next one.

* We have a NO SPAM policy so you won't reaceive any meaningless emails from us!

Related Content

Add a Monitor to CSS Files Generated from SASS in Sublime Text 3 + SFTP

How to add a monitor to dynamically updated file with Sublime Text 3 and SFTP package.

READ MORE...

How to Add Sub Domain on Kinsta

Step-by-step guide on how to add a subdomain to your Kinsta account.

READ MORE...

6 Expert Gutenberg Tips and Tricks You Should Know

6 expert tips and tricks you probably didn’t know that may improve your workflow and productivity within Gutenberg.

READ MORE...

Leave a Reply

Your email address will not be published. Required fields are marked *

Add a Monitor to CSS Files Generated from SASS in Sublime Text 3 + SFTP
5 Popular Web Page Components Done with Pure CSS

Thank you for reading our content. Use the buttons below to spread the love and share 6 Expert Gutenberg Tips and Tricks You Should Know with your followers.