Baraa Al-Tabbaa :
You can use this library to pass Sass variables to JS.\nhttps://www.npmjs.com/package/sass-to-js\n\nhere's an example,\n\nSASS:\n\n$colorMap: (\n colorHexShort: #f00,\n colorHex: #ff0000,\n colorRgba: rgba(255, 0, 0, 0.5),\n blackGradations: ('#000', '#111', '#222') \n);\n.colors-data{\n &:before{\n content: sassToJs($colorMap);\n display: none;\n }\n}\n\n\nJS:\n\nvar colorsDataEl = $('.colors-data');\nvar colorsData = colorsDataEl.sassToJs({pseudoEl:\":before\", cssProperty: \"content\"});\ncolorsDataEl.html(JSON.stringify(colorsData));\n",
2018-11-16T13:27:36
Tim Rooke :
If using Webpack, you can do this easily with :export without the need for additional dependencies.\nwebpack.config.js\nmodule.exports = {\n ...\n module: {\n rules: [{\n test: /\\.scss$/,\n use: [{\n loader: "style-loader" // creates style nodes from JS strings\n }, {\n loader: "css-loader" // translates CSS into CommonJS\n }, {\n loader: "sass-loader" // compiles Sass to CSS\n }]\n }]\n }\n};\n\nvariables.scss\n$white-color: #fcf5ed;\n$dark-color: #402f2b;\n$light-color: #e6d5c3;\n$medium-color: #977978;\n$alert-color: #cb492a;\n$light-black-color: #706e72;\n$black-color: #414042;\n\n// the :export directive is the magic sauce for webpack\n:export {\n whitecolor: $white-color;\n darkcolor: $dark-color;\n lightcolor: $light-color;\n mediumcolor: $medium-color;\n alertcolor: $alert-color;\n lightblackcolor: $light-black-color;\n blackcolor: $black-color;\n}\n\nfile.js\nimport variables from 'variables.scss';\n\nconst CSS = {\n backgroundColor: variables.blackcolor\n}\n\nexport default ({}) => {\n return <div style={CSS}>Content</div>\n}\n",
2018-11-16T14:26:53