Search code examples
javascriptlaravelvariablessasslaravel-blade

Is it possible to pass a Sass variable to Laravel/Blade/JS?

I'm trying to get a variable I use in Sass over to Laravel/Blade/JS so that I can use one variable defined in one place to maintain something across the various languages used to maintain the site.

Is it possible to pass a Sass variable to Laravel/Blade/JS so I can do this? Thanks.

Solution

  • You can use this library to pass Sass variables to JS. https://www.npmjs.com/package/sass-to-js

    here's an example,

    SASS:

    $colorMap: (
  colorHexShort: #f00,
  colorHex: #ff0000,
  colorRgba: rgba(255, 0, 0, 0.5),
  blackGradations: ('#000', '#111', '#222') 
);
.colors-data{
  &:before{
    content: sassToJs($colorMap);
    display: none;
  }
}

    JS:

    var colorsDataEl = $('.colors-data');
var colorsData = colorsDataEl.sassToJs({pseudoEl:":before", cssProperty: "content"});
colorsDataEl.html(JSON.stringify(colorsData));