Marko: Variables/SASS and styling in index.marko files?

[basickarl]

In my index.marko file I have the following:

style {
    nav .not-signed-in {
      background: red;
    }
}

I tried the following:

$ var primaryColor = 'red';
style {
    nav .not-signed-in {
      background: ${primaryColor};
    }
}

Which doesn't work. This leads to believe this isn't supported? I haven't seem any documentation on it yet.

I also believe that SASS isn't supported (I'm using lasso with the plugins) as the following doesn't work:

style {
    nav {
       .not-signed-in {
          background: red;
       }
    }
}

[darkwebdev]

Not sure about SASS, but I believe you can write something like:

style.less {
    nav {
       .not-signed-in {
          background: red;
       }
    }
}

[cameronblandford]

Marko claims support for SASS/SCSS but neither of these (style.scss, style.sass) work (style.less does).

[snnsnn]

@cameronblandford You need to install dependencies.

For lasso, they are node-sass and lasso-sass.

npm i node-sass lasso-sass

And change lasso config.

require('lasso').configure({ plugins: [ 'lasso-marko' 'lasso-sass' ] });