Archived video

This video is archived and won't be updated. We're keeping it online for now as a courtesy.

Sass Mixins

Video loading...

Transcript language code: 

Join Drupalize.Me to watch this video

Join today and gain instant access to our entire video library.

Log in Sign up
  • 0:06
    A mixin is the Sass term for a CSS preprocessor feature
  • 0:10
    which acts as sort of a super variable as it were.
  • 0:14
    Instead of just having one string of text or numbers assigned to a variable name,
  • 0:19
    with a mixin you actually are assigning an entire chunk of CSS code.
  • 0:24
    So several lines of work that are going on are all assigned to one mixin term,
  • 0:31
    and then you include that mixin in your CSS code,
  • 0:35
    and all of that is going to get injected right where you said
  • 0:38
    that you wanted to include your mixin.
  • 0:41
    So this is handy when you solve a common problem
  • 0:44
    that requires more than just one line of CSS,
Loading ...

Sass Mixins


A mixin is a term used for a feature of preprocesors which acts a lot like a super-variable. You can write up larger chunks of CSS and assign them to a mixin name, then when you "include" that mixin, it will inject all of that CSS into the location. This is great for setting up common ways of displaying things, or handling common problems, and then just reusing that same method throughout. You can also add arguments to your mixin so that you can tweak the output according to your use case. This takes the reusable concept of variables up a notch.

Additional resources:
There are no resources for this video. If you believe there should be, please contact us.