A quick use of mixins and media queries.
Disclaimer: I’m new to Front-end development, i just had a change on my carreer that shifted me towards it.
I’ll start to document whatever i discover to be usefull that doesn’t have many documentation online.
Now, to mixins!
I’ll skip the basics and just show this ONE case, bare with me!
Part 1 //The project
I was working on a single-page application wich has so many little assets and the client wanted everyone of them right perfectly positioned.
I decided to use position: absolute and just run with it, positioning them all and doing the media queries as logic demanded, BUT my CSS was getting very long and ugly, that’s when i found out about mixins!
So i did a mixin solution to make the maintance clear and easy, the code is still pretty long BUT easier to use.
Part 2 //The CORE MIXIN
Let’s get right into it.
First you declare your @mixin with the name you want to give it: in this case i made “@mixin asset-generic”, it would contain the first base of values that i want all my assets to have.
The first value is “$name”, because i want to declare the names of the classes for each asset.
Then i call for the css code and set the variables to each property, this is how it looks like so far:
The @content let me call forward the whole code on the assets and media queries i want to do.
Part 3 //The Media query breakpoints
So, to prepare each breakdown i also made them into variables so i can just call them whenever i need and also make the maintance ALOT easier if i need to.
Now i make another @mixin and set the name/variable to $breakpoint and inside it i do a media query with the value i want (max-width: #), the map-get is a fuction that runs an array, in this case he runs the $breakpoints looking for the correspondent $breakpoint i called on the mixin.
Part 4 //The MIXIN per say!
Simple enough, you just call for it.
And this is how the browser sees it:
What if i want to change a value on a specific asset?
You just change it following the order of the mixin
And i want to change specific values, jumping between ones? Like top, z-index and transform?
Well you can just specify the names of the variables and call them.
So i jumped over $top (remained the same value as the base), changed $left, jumped over $zIndex and $minWidth and changed $width, and so on.
Ok what about the media queries?
Well, you just.. call for it as well!
And it goes just like butter
That’s it! Hope it helps someone in need, i sure took my time and with a help of a wonderful friend, figured out how to put this together!