I recently 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 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 in seeing more and following this project’s progress, 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 square grid for your project.
You can easily customize the output CSS classes for each mixins bypassing your own naming conventions (e.g., instead of the column, you can use col) and changing 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 one for padding.
Note: With a few little changes, you can put the two mixins into 1.
Again you can easily customize them to meet your needs. Use rem instead of px.
For example, if you set the unit to rem, step to 1, from 0 and 10, it 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 needed 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 using the above mixins.
- Create file named styles.scss
- Add any of mixins inside this file, for example:
@import ‘container’;
@include container(); - Run sass –watch . where styles.scss is (assuming all the files are in the same directory)
- 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.