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 SASS-lang.com 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


Simple HTML up

For those of you using such programs as sublime text or Notepadd +++, its rather annoying when yo...

2017-02-08

Read More

Adding Boostrap.js to Laravel Project Via Gulp

So while on Twitch, streaming my current Laravel build I came up against something I have never t...

2017-01-29

Read More

Twitter