Graham Morby-Raybould

Designer. Developer. Freelancer.

Sir Mixin alot

Sir Mixin alot

So I have not written here for an age! I have been so busy with work and retraining as a PHP developer that I have let this site here 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 id 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 apply's that parameter to all the rules within the mixin and outputs our flat css. Pretty Cool Right?

We can now use out margin mixin to add margins to any style and declare our parameter and 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.  

Ah the power of SASS!

Created: 2016-12-20.

Recent posts

Basic Laravel install

So you want to set up a new Laravel Install? Correct? Right ok so lets begin..... First...


Read More

Back to blogging and a headache

It's a hard thing this day in age to decide what is best to do in terms of technology and how...


Read More