scss @include [mixin] с использованием синтаксиса ([аргументы]), не распознаваемого в проекте реагирования

Следуя документации по sass на https://sass-lang.com/documentation/at-rules/mixin#passing-arguments-to-content-blocks, я решил создать миксин, который берет блок контента и динамически изменяет его с помощью медиа-запросов, а также предоставляет переменную для гибкого использования:

@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;
    }
}

Это компилируется с синтаксической ошибкой, ожидающей точки с запятой, где идут аргументы @content (@content; вместо @content(...)

Также подсветка синтаксиса VsCode тоже путается вокруг блока using.

Я использую "node-sass": "^4.12.0" и "react": "^16.10.2"

Если я совершенно неправильно понимаю эту функцию, альтернативное решение также приветствуется.

Спасибо.


reactjs sass node-sass sass-loader scss-mixins
person beqa    schedule 24.10.2019    source источник
comment
Если вы не используете Dart sass, вы не сможете передать какой-либо аргумент вашему @content. Однако здесь вы можете найти хорошее решение для своей проблемы :-) =› stackoverflow.com/questions/29596968/   -  person ReSedano    schedule 24.10.2019
comment
Спасибо. В итоге я использовал второе решение, вероятно, перейду на dart sass, когда смогу.   -  person beqa    schedule 25.10.2019