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!

How i felt when i figured all out//

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!

And i mean, ALOT of assets.

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.

much generic, very wow

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:

also, what’s up with the @content?

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.

not proud of the names, i know

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.

also there’s the @content again, waiting to be called in

Part 4 //The MIXIN per say!

Simple enough, you just call for it.

that’s it? wow

And this is how the browser sees it:

oh yeah bby

What if i want to change a value on a specific asset?

You just change it following the order of the mixin

here changing top and left
goes like this

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.

like this

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.

here i changed $top and $left in order, so i didn’t need to set the names, but the rest of them i had, because i started jumping between ones

Ok what about the media queries?

Well, you just.. call for it as well!

simple enough, it sorts out everything for you

And it goes just like butter

so wonderfull!
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!