Sass & SCSS Tutorial for Beginners – 6 – Mixins

Facebook –
GitHub –
Google+ –
LinkedIn –
reddit –
Support –
thenewboston –
Twitter –






12 responses to “Sass & SCSS Tutorial for Beginners – 6 – Mixins”

  1. DaellusKnights Avatar

    Heya! I know i'm late to the party, but I'm loving this!
    Bucky, yours is the first videos I came across, and
    your presentation, plus my own playing around with
    WebStorm… I'm buying it on my very next payday. 😀

    Also wanted to share my personal preference for using
    a @mixin schema for browser prefixes… This mixin
    allows you to pass ANY prefixed command and its value.
    It also works for any multivalue comands. Transition, for
    instance… just pass it @include prefix(transition,all 1s ease .3s).
    Works for all of them 😀

    body {
    background: lightblue url("../img/grid-bg.jpg") no-repeat center fixed;
    @include prefix(background-size,cover);
    @mixin prefix($fname, $value){
    -webkit-#{$fname}: $value;
    -moz-#{$fname}: $value;
    -ms-#{$fname}: $value;
    -o-#{$fname}: $value;
    $fname: $value;

  2. Shalom Dahal Avatar


  3. Chase E Avatar

    nice tutorial, thanks

  4. Nikhil Shah Avatar

    Thanks for a great tutorial series.

  5. Bflatest Avatar

    after you set the $radius parameter you can add a colon and a default value like..
    @mixin border-radius( $radius : 5px){… that way if you just include .. @include border-radius(); and it will compile as 5px

  6. Alwan Mortada Avatar

    1-does it matter what you name the param you pass in the e.g @mixin border-radius($apple){…}; $apple: light-blue; 2- how many arguments can you pass through the @mixin and how can you call them?

  7. Dustin Poissant Avatar

    Great tutorial but border-radius is a bad example because you no longer need any browser prefixes. Not sure what browsers you are trying to support but border-radius has been fully supported since IE9+ and for webkit since Chrome 4 (like 10 years ago) we are now on Chrome 47 so that prefix is completely useless.

  8. rash samy Avatar

    hey buddy, it'd be highly appreciated if you make tutorials about SMACSS….

  9. Ulises Calvo Avatar

    Better explained than Teamtrehouse (which I use to learn). You go straight to the point and make it concise and clear. tnx.

  10. SabakuSouSou87 Avatar

    So mixin is basically a function that doesn't return a value (I think). They should have given it a better name.

Leave a Reply

Your email address will not be published. Required fields are marked *