Graham Morby-Raybould

Designer. Developer. Freelancer.

Sir Mixin alot

Sir Mixin alot

So I haven't been active on here for an age! I have been so busy with work and retraining as a PHP developer that I have let this site slip, but 2017 will bring a renewed pleasure in blogging and getting myself out there a little more. 

So to start this trend I though i'd go for a simple tut on SASS mixins, mainly because I have been writing tons of them this week. 

So what is a Mixin? Well explains it like this:

"Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes."

The best way to explain is with a simple margin style that could be used in many ways:

@mixin margin($margin) {
margin-top: $margin;
margin-bottom: $margin;

.margin {
@include margin(10px);

// Output

.margin {
margin-top: 10px;
margin-bottom: 10px;

So as you can see from above, we add a parameter to the mixin which we can then call in the include. The variable that's created then applys that parameter to all the rules within the mixin and outputs our flat css. Pretty cool right?

We can now use our margin mixin to add margins to any style and declare our parameter, all only using a few lines of code! This is a very simple way of writing a mixin and with a little googling you will find some more extreme and complex examples.  

Ahh the power of SASS!

Created: 2017-11-14.

Recent posts

OFF TOPIC - The last Cassini image is something so beautiful

We live in a world where technology rules, a world where we cant seem to cross the road with out...


Read More

Have you tried turning it off and on again

It would seem its a common thing this day in age. As a developer I have a certain amount of compu...


Read More