0

Following the sass documentation at https://sass-lang.com/documentation/at-rules/mixin#passing-arguments-to-content-blocks, I decided to create a mixin that takes a content block and dynamically changes it using media queries, while also providing variable for flexible usage:

@mixin main-offset {
    @content (7.26%);

    @media screen and (max-width: 1360px) {
        @content (24%);
    }
}

body {
    @include main-offset using($offset) {
        padding: 0 $offset 0 0;
        margin: 0 0 0 $offset;
    }
}

This compiles with syntax error expecting semicolon where @content arguments go (@content; instead of @content(...)

Also VsCode syntax highlighter is confused too around using block.

I'm using "node-sass": "^4.12.0" and "react": "^16.10.2"

If I completely misunderstand this feature, alternative solution is also welcome too.

Thank you.

beqa
  • 255
  • 3
  • 11
  • 1
    If you don't use [Dart sass](https://sass-lang.com/dart-sass) you can't pass any arg to your `@content`. However, here you can find a good solution for your problem :-) => https://stackoverflow.com/questions/29596968/passing-arguments-from-a-mixin-to-a-content-block – ReSedano Oct 24 '19 at 14:26
  • Thanks. I ended up using the second solution, will probably change to dart sass when I can – beqa Oct 25 '19 at 13:41

0 Answers0