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

Solution:1

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));

Solution:2

If using Webpack, you can do this easily with :export without the need for additional dependencies.

webpack.config.js

module.exports = {
  ...
  module: {
    rules: [{
      test: /\.scss$/,
      use: [{
        loader: "style-loader" // creates style nodes from JS strings
      }, {
        loader: "css-loader" // translates CSS into CommonJS
      }, {
        loader: "sass-loader" // compiles Sass to CSS
      }]
    }]
  }
};

variables.scss

$white-color: #fcf5ed;
$dark-color: #402f2b;
$light-color: #e6d5c3;
$medium-color: #977978;
$alert-color: #cb492a;
$light-black-color: #706e72;
$black-color: #414042;

// the :export directive is the magic sauce for webpack
:export {
  whitecolor: $white-color;
  darkcolor: $dark-color;
  lightcolor: $light-color;
  mediumcolor: $medium-color;
  alertcolor: $alert-color;
  lightblackcolor: $light-black-color;
  blackcolor: $black-color;
}

file.js

import variables from 'variables.scss';

const CSS = {
  backgroundColor: variables.blackcolor
}

export default ({}) => {
  return <div style={CSS}>Content</div>
}