Sass and flexbox

[mk4111]

• [x] Mixins
• [x] media queries
• [x] meta tags
• [x] flexbox
• [x] _@_content

[minaorangina]

_@_content

Blog post on it here

Let's say you've defined a button mixin.

@mixin myButtonMixin {
    display: block;
    background-color: blue;
    text-decoration: none;
}

And you have various types of button. .cancel .send .back. Each with slightly different style variations.

_@_content lets you extend the mixin.
It's a placeholder for n number of extra css rules.

.cancel {
    @include myButtonMixin {
        background-color: red;
        font-weight: bold;
    }
}

.send {
    @include myButtonMixin {
        background-color: green;
        border: none;
    }
}

Tidier than passing in loads and loads of variables to your mixin.

[mk4111]

_@mixin & @_placeholder

Here's a blog that I found pretty useful!

In summary, both _@mixin and @_placeholder can be used to create reusable lines of CSS. They seem like CSS' version of (React's) reusable components in the sense that blocks of code can be referenced without having to repetitively type them out again and again.

There seem to be 2 big differences between _@mixin and @_placeholder:

[1] With a _@mixin, you can pass variables - just as you might pass arguments in a function. A @_placeholder lacks this sort of customisation.

[2] Although you're saved from having to go through the manual labour of repeating blocks of CSS with _@mixin, when Sass compiles, it will do exactly that. So in effect, you end up with pretty much the same result: a bigger stylesheet. This is not the case with @placeholder. So, use @_placeholder where possible.