将SASS变量传递给javascript的行业标准方法是什么？ [英] What's the industry standard way to pass SASS variable to javascript?

问题描述

我环顾四周，我已经看到了一个解决方案，在你的html中，你会有一个专用于将sass变量传递给javascript的标记。我正在谈论第二个答案来自

import-variables-variables-from-javascript-to-sass-or-vice-versa>

我也尝试使用html

 < div class =selector>< / div> 
  

with css

  .selector {content：stuff; } 
  

但是在开发人员工具中查看dom，即使我们可以在呈现的页面上看到它，所以我无法使用javascript来检索它。

  $（'。selector'）。text（） 
  

每个人如何操作？

解决方案

不确定行业标准，但它是一种非常方便的技术，并不难。虽然伪元素的内容不能通过 text（）获得，但您必须使用 getComputedStyle 。

$ b

使用 body：之后的示例：

Sass （使用罗盘断点扩展）：

  body：在{
 display：none; 
 
 @include breakpoint（$ bp-wide）{
 content：wide; 
} 
 
 @include breakpoint（$ bp-medium）{
 content：medium; 
} 
 
 @include breakpoint（$ bp-small）{
 content：small; 
 
 
  

JavaScript p>

  if（window.getComputedStyle）{
 var mq = window.getComputedStyle（document.body，'：after'）。 getPropertyValue（ '内容'）; 
 
 
 if（mq.indexOf（'small'）！== -1）{
 //做某事
} 
  

学分：我第一次在这里看到这个技巧： https://coderwall.com/p/_ldtkg

I have looked around and I've seen one solution where in your html, you'd have a tag dedicated to pass sass variables to javascript. I'm talking about the second answer from

Is there a way to import variables from javascript to sass or vice versa?

I also tried using html

<div class="selector"></div>

with css

.selector { content: "stuff"; }

but looking at the dom in the developer tools, it doesn't get added even though we can see it on the rendered page, so I cannot pick it up with javascript

$('.selector').text()

How does everyone do it?

解决方案

Not sure about "industry standard", but it's a very handy technique and not too difficult. The content of pseudo elements is not available via text() though, you have to use getComputedStyle.

Example using body:after:

Sass (using the compass breakpoint extension):

body:after {
  display: none;

  @include breakpoint($bp-wide) {
    content: "wide";
  }

  @include breakpoint($bp-medium) {
    content: "medium";
  }

  @include breakpoint($bp-small) {
    content: "small";
  }
}

JavaScript:

if (window.getComputedStyle) {
  var mq = window.getComputedStyle(document.body,':after').getPropertyValue('content');
}

if (mq.indexOf('small') !== -1) {
  // do something
}

Credit: I first saw this technique here: https://coderwall.com/p/_ldtkg

这篇关于将SASS变量传递给javascript的行业标准方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！