Bulma: [Help] scss mixins

[loranger]

Checklist

• [x] This is about the Bulma CSS framework
• [ ] This is about the Bulma Docs
• [x] I'm using Bulma version [0.2.1]
• [x] My browser is: Brave
• [x] This is a Sass issue: I'm using version [3.4.22]
• [x] I am sure this issue is not a duplicate?
  

  Description

Hello,
I may be off topic, but please accept my apologies, I need help :
I use Bulma with Laravel. Laravel-elixir is a gulp wrapper which pack every useful assets together.
So basically, I use sass and webpack under the hood.

I have a lot of fun while using Bulma as Bootstrap replacement but now I'm stuck because I try to use a responsive mixin in my scss file.

Could someone can show me my error, and maybe a way to use mixins from my scss file ?

Steps to Reproduce

I'm trying to apply a translation on one of my div but I can't figure out what is the correct syntax.
From my app.scss, I've tried

@import 'bulma/bulma';
@import 'bulma/sass/utilities/mixins';

(...)

  .is-custom {

    =desktop
      transform: translateX(-60%);

      &h2 {
        text-transform: uppercase;
      }

  }

But I got the error below.

I also tried a lot of (blinded) alternatives, but non worked :

=desktop {
  transform: translateX(-60%);
}

@include =desktop {
  transform: translateX(-60%);
}

@include =desktop(transform: translateX(-60%);)

+desktop({transform: translateX(-60%);})

@include desktop({transform: translateX(-60%)});

Expected behavior

I'd expect a desktop' media query computed with my transform definition

Actual behavior

Here is the error message I got

[18:03:00] Starting 'sass'...
{ Error: resources/assets/sass/app.scss
Error: Invalid CSS after "  .is-custom {": expected "}", was "=desktop"
        on line 44 of resources/assets/sass/app.scss
>>   .is-floating {
   ----------------^

    at options.error (/Users/loranger/Developer/myproject/node_modules/node-sass/lib/index.js:292:26)
  status: 1,
  file: '/Users/loranger/Developer/myproject/resources/assets/sass/app.scss',
  line: 44,
  column: 17,
  message: 'resources/assets/sass/app.scss\nError: Invalid CSS after "  .is-custom {": expected "}", was "=desktop"\n        on line 44 of resources/assets/sass/app.scss\n>>   .is-custom {\n   ----------------^\n',
  formatted: 'Error: Invalid CSS after "  .is-custom {": expected "}", was "=desktop"\n        on line 44 of resources/assets/sass/app.scss\n>>   .is-custom {\n   ----------------^\n',
  messageFormatted: '\u001b[4mresources/assets/sass/app.scss\u001b[24m\nError: Invalid CSS after "  .is-custom {": expected "}", was "=desktop"\n        on line 44 of resources/assets/sass/app.scss\n>>   .is-custom {\n   ----------------^\n',
  messageOriginal: 'Invalid CSS after "  .is-custom {": expected "}", was "=desktop"',
  relativePath: 'resources/assets/sass/app.scss',
  name: 'Error',
  stack: 'Error: resources/assets/sass/app.scss\nError: Invalid CSS after "  .is-custom {": expected "}", was "=desktop"\n        on line 44 of resources/assets/sass/app.scss\n>>   .is-custom {\n   ----------------^\n\n    at options.error (/Users/loranger/Developer/myproject/node_modules/node-sass/lib/index.js:292:26)',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-sass' }

[loranger]

Please ?
Any clue ? Any advice or tutorial, maybe ?

[givehug]

You are mixing .sass and .scss syntax
http://sass-lang.com/guide

in sass it should be
+desktop
color: red

in scss
@include desktop {
color: red;
}

but i am not sure you can import sass mixins into scss

[loranger]

That's exactly my issue, thank you so much !
I owe you a hug, @givehug ;)

[infacq]

what did you do? you rewrite everything?

[loranger]

No, I don't.
I simply use bulma from sources in my project and create some new classes in order to fit my needs. But I needed my new classes to be as responsive as possible, and instead of rewriting media-queries, I'd prefered to use existing mixins.
Now it works like a charm :p