如何在同一位置设置JavaScript和SASS常量？

有时需要两次设置某些常量：在SASS和JS中（例如为了更好的性能）。有人知道同步SASS/SCSS和JavaScript变量的解决方案，以便从JavaScript或从SASS到JavaScript访问SCSS变量吗？

我知道这几乎是一年前提出的，但我把这个答案作为下一个有这个问题的可怜的sod的参考。可能有更好的解决方案，但这是我唯一能找到/想出的

由于JavaScript似乎无法直接从任何

.scss

文件中获取变量，因此我们必须使用正则表达式从文件中获取所需的值。但由于我们不想让它搜索整个SASS文件：

创建一个包含变量的SASS文件 我们创建了一个新文件，

\u variables.scss

，供JavaScript搜索。假设它看起来像这样：

$menuMobileArrowRotate: 90;
$articleScale: 1.1;

将其导入我们的主SASS文件 通过添加

@Import“变量”将其导入SASS位于样式表顶部附近。然后，我们可以在整个文件中使用这些变量，而不是手动输入值

将其导入JavaScript
我将让JavaScript读取
\u variables.scss
，并将其转换为字符串：

var sassVariables = new XMLHttpRequest();
sassVariables.open("GET", 'http://www.use-absolute-url.com/_variables.scss', false);
sassVariables.send(null);

注意：要支持IE6和更早版本，请替换
var xmlhttp=new XMLHttpRequest（）带有：


如果我设置asynch。对于
true
，Firebug向我显示了一个错误，声称
fileContent
不存在。因为我的文件只有4KB，所以我不会因为等待加载而太担心潜在的性能问题

现在，我要声明我的变量：

var fileContent = sassVariables.responseText, //a string holding the contents of my file
    menuMobileArrowRotate = null,
    articleScale = null;

我声明了
menumobilearrororotate
和
articleScale
，然后才确定文件是否实际加载，因为我不希望JavaScript仅仅因为没有加载就给我一个错误并把一切搞得一团糟

如果一切正常，我将使用正则表达式来找出每个变量的值。至少我只是浏览一个小文件，而不是搜索整个样式表

if (sassVariables.status === 200) { //if everything loaded nice and dandy
    menuMobileArrowRotate = fileContent.match(/(?:menuMobileArrowRotate.\s*?)(\d+)/)[1];
    articleScale = data.match(/(?:articleScale.\s*?)((\d+)\.*(\d+)*)/)[1];
}

注意
.match（）
之后的
[1]
：RegEx返回一个数组，我只需要第一个匹配（在我的例子中，它也是唯一的匹配）

对于所有的JS加在一起：

if (window.XMLHttpRequest) {
  var sassVariables = new XMLHttpRequest();
}
else {
  var sassVariables = new ActiveXObject("Microsoft.XMLHTTP");
}

sassVariables.open("GET", 'http://mysite.com/sass/_variables.scss', false);
sassVariables.send(null);
var fileContent = sassVariables.responseText,
    menuMobileArrowRotate = null,
    articleScale = null;

if (sassVariables.status === 200) {
    menuMobileArrowRotate = fileContent.match(/(?:menuMobileArrowRotate.\s*?)(\d+)/)[1];
    articleScale = fileContent.match(/(?:articleScale.\s*?)((\d+)\.*(\d+)*)/)[1];
}
console.log(menuMobileArrowRotate); //shows 90
console.log(articleScale); //shows 1.1

我现在可以在JavaScript文件中的任何地方使用这些变量

奖励：媒体查询变量
SASS不允许在媒体查询中使用变量。但是，我可以，并将其放入
\u variables.scss
：

@mixin mediaQuery($point) {
  @if $point == 'mobile' {
    @media only screen and (max-width: 600px) { @content; }
  }
  @if $point == 'somethingElse' {
    @media only screen and (max-width: 1000px) { @content; }
  }
}

在
style.scss
中，我可以：

@include mediaQuery(mobile) {
    //blah
}
@include mediaQuery(somethingElse) {
    //blah
}

然后，我可以使用相同的过程获得所需的值（即600和1000），只需使用不同的正则表达式。
您可以尝试在SASS/CSS注释块中编写JSON：

/*
    {
        "blue"  : "#{$blue}",
        "green" : "#{$green}"
    }

然后在客户机上提取和使用它。
如果您使用的是webpack、CSS模块和SAS（例如，使用React），您可以只使用：export pseudoselector，如前所述或

/*
    {
        "blue"  : "#{$blue}",
        "green" : "#{$green}"
    }