blocks|key|2363117|text|您可以使用这个库将Sass变量传递给JS。https://www.npmjs.com/package/sass-to-js|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2363118|举个例子，|2363119|SASS:|style|BOLD|2363120|$colorMap:+(
++colorHexShort:+#f00,
++colorHex:+#ff0000,
++colorRgba:+rgba(255,+0,+0,+0.5),
++blackGradations:+('#000',+'#111',+'#222')+
);
.colors-data{
++&:before{
++++content:+sassToJs($colorMap);
++++display:+none;
++}
}|code-block|syntax|javascript|2363121|JS:|2363122|var+colorsDataEl+=+$('.colors-data');
var+colorsData+=+colorsDataEl.sassToJs({pseudoEl:":before",+cssProperty:+"content"});
colorsDataEl.html(JSON.stringify(colorsData));|2363123|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/sass-to-js^0|L|14|0|0|0|0|5|0|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|15|8|@$A|16|B|17|H|I]]|9|@]|C|$]]|$1|J|3|K|5|L|7|18|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|19|8|@$A|1A|B|1B|H|I]]|9|@]|C|$]]|$1|Q|3|R|5|L|7|1C|8|@]|9|@]|C|$M|N]]|$1|S|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

You can use this library to pass Sass variables to JS.
<a href="https://www.npmjs.com/package/sass-to-js" rel="nofollow noreferrer">https://www.npmjs.com/package/sass-to-js</a>

here's an example,

SASS:

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

JS:

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

blocks|key|1519940|text|如果使用Webpack，您可以使用:export轻松地完成这一任务，而不需要额外的依赖关系。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1519941|webpack.config.js|BOLD|1519942|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
++++++}]
++++}]
++}
};|code-block|syntax|javascript|1519943|variables.scss|1519944|$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;
}|1519945|file.js|1519946|import+variables+from+'variables.scss';

const+CSS+=+{
++backgroundColor:+variables.blackcolor
}

export+default+({})+=>+{
++return+<div+style={CSS}>Content</div>
}|1519947|entityMap^0|H|7|0|0|H|0|0|0|E|0|0|0|7|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@$9|11|A|12|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|13|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|14|8|@$9|15|A|16|B|H]]|D|@]|E|$]]|$1|P|3|Q|5|K|7|17|8|@]|D|@]|E|$L|M]]|$1|R|3|S|5|6|7|18|8|@$9|19|A|1A|B|H]]|D|@]|E|$]]|$1|T|3|U|5|K|7|1B|8|@]|D|@]|E|$L|M]]|$1|V|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|W|$]]

If using Webpack, you can do this easily with <code>:export</code> without the need for additional dependencies.
webpack.config.js
<pre><code>module.exports = {
 ...
 module: {
 rules: [{
 test: /\.scss$/,
 use: [{
 loader: &quot;style-loader&quot; // creates style nodes from JS strings
 }, {
 loader: &quot;css-loader&quot; // translates CSS into CommonJS
 }, {
 loader: &quot;sass-loader&quot; // compiles Sass to CSS
 }]
 }]
 }
};
</code></pre>
variables.scss
<pre><code>$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;
}
</code></pre>
file.js
<pre><code>import variables from 'variables.scss';

const CSS = {
 backgroundColor: variables.blackcolor
}

export default ({}) =&gt; {
 return &lt;div style={CSS}&gt;Content&lt;/div&gt;
}
</code></pre>

blocks|key|572223|text|这里是一种自定义解决方案，用于将Sass变量导出到Js文件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|572224|首先，我的Sass变量：|572225|$bifurcation++++++++++++++++:+violet;
$simple+++++++++++++++++++++:+green;
$multiple+++++++++++++++++++:+orange;
$crossing+++++++++++++++++++:+yellow;
$common+++++++++++++++++++++:+brown;|code-block|syntax|javascript|572226|我将它们放入一个未知的css属性中：|572227|variable_to_export+{
++++start_export:+unset;
++++bifurcation:+$bifurcation;
++++simple:+$simple;
++++multiple:+$multiple;
++++crossing:+$crossing;
++++common:+$common;
++++end_export:+unset;
}|572228|在我的js文件上，我将读取包含变量_+to+_的编译后的scss文件。这个代码块在一个函数中，我可以将它导出到所有需要它的文件：|572229|export+function+variables()+{
++++var+variables+=+[];

++++$.ajax({
++++++++url:+"/css/global.css",
++++++++dataType:+"text",
++++++++success:+function(css)+{
++++++++++++var+position+=+css.indexOf('start_export');
++++++++++++var+position_end+=+css.indexOf('end_export');
++++++++++++var+clean+=+css.slice(position,+position_end).replace(/+/g,+'').replaceAll(';',+'');
++++++++++++var+array_variables+=+clean.split(/\r?\n/);
+++++++

++++++++++++array_variables.forEach(function(element)+{
++++++++++++++++var+split+=+element.split(':');
++++++++++++++++if+(split[0]+!=+'start_export'+&&+split[0]+!=+'')+{
++++++++++++++++++++variables[split[0]]+=+split[1];
++++++++++++++++}
++++++++++++});
++++++++}
++++});

++++return+variables;
}|572230|在这个阶段，我们有一个数组，其中包含css属性的名称作为索引，以及在我想要的js文件中Sass变量的值。|572231|结果在这里|572232|我认为肯定有需要改进的地方，解决办法有点草率，但确实有效。|572233|entityMap|0|LINK|mutability|MUTABLE|url|https://i.stack.imgur.com/3X6B1.png^0|G|4|P|2|0|5|4|0|0|B|3|0|0|3|2|S|4|0|0|I|3|17|4|0|0|5|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1G|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|1K|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1L|8|@$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|S|3|T|5|J|7|1Q|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|1R|8|@$9|1S|A|1T|B|C]|$9|1U|A|1V|B|C]]|D|@]|E|$]]|$1|W|3|X|5|6|7|1W|8|@]|D|@$9|1X|A|1Y|1|1Z]]|E|$]]|$1|Y|3|Z|5|6|7|20|8|@]|D|@]|E|$]]|$1|10|3|-4|5|6|7|21|8|@]|D|@]|E|$]]]|11|$12|$5|13|14|15|E|$16|17]]]]

Here a kind of custom solution to export your Sass variables to a Js file.
First my Sass variables :
<pre><code>$bifurcation : violet;
$simple : green;
$multiple : orange;
$crossing : yellow;
$common : brown;
</code></pre>
I put them into an unknown css property :
<pre><code>variable_to_export {
 start_export: unset;
 bifurcation: $bifurcation;
 simple: $simple;
 multiple: $multiple;
 crossing: $crossing;
 common: $common;
 end_export: unset;
}
</code></pre>
On my js file, i'm going to read the compiled scss file containing my 'variable_to_export'. This block of code is in a function that I can export to all my files that need it :
<pre><code>export function variables() {
 var variables = [];

 $.ajax({
 url: &quot;/css/global.css&quot;,
 dataType: &quot;text&quot;,
 success: function(css) {
 var position = css.indexOf('start_export');
 var position_end = css.indexOf('end_export');
 var clean = css.slice(position, position_end).replace(/ /g, '').replaceAll(';', '');
 var array_variables = clean.split(/\r?\n/);
 

 array_variables.forEach(function(element) {
 var split = element.split(':');
 if (split[0] != 'start_export' &amp;&amp; split[0] != '') {
 variables[split[0]] = split[1];
 }
 });
 }
 });

 return variables;
}
</code></pre>
At this stage we have an array containing the name of the css property as index, and the value of the Sass variable in my desired js files.
<a href="https://i.stack.imgur.com/3X6B1.png" rel="nofollow noreferrer">Result here</a>
I think there are surely things to improve, the solution is a bit rooty but it works.

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.

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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我试图将我在Sass中使用的变量转到Laravel/Blade/JS，这样我就可以使用一个在一个地方定义的变量来维护用于维护站点的各种语言。是否可以将Sass变量传递给Laravel/Blade/JS，这样我就可以这样做了吗？谢谢。

问能否将Sass变量传递给Laravel/Blade/JS？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问能否将Sass变量传递给Laravel/Blade/JS？EN