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.
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.
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).
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.
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…
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.
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.
Hopefully, this was a useful introduction and these mixins will help you with your project.
‘Till the next one.
* We have a NO SPAM policy so you won't reaceive any meaningless emails from us!