web-dev-qa-db-ja.com

JavaScriptからsassまたはその逆に変数をインポートする方法はありますか？

私は、ブロックの概念に依存するCSSグリッドシステムを作成しています。だから私は次のようなベースファイルを持っています：

$max-columns: 4;
$block-width: 220px;
$block-height: 150px;
$block-margin: 10px;

そして、それはミックスインによって使用されます：

@mixin block ($rows, $columns, $max-columns) {
  display: block;
  float: left;
  margin: $block-margin 0 0 $block-margin;
  box-sizing: border-box;
  width: ($block-width * $columns) - $block-margin;
}

しかし、JavaScriptがベースファイルの変数にアクセスできるようにしたいと思っています。私は目に見えないdivを作成し、それに$ block-width、$ block-height、および$ block-margin属性を与え、そこから値をプルできると考えていました。しかし、max-columnsは直接何にもマップされないため、divでレンダリングするためのハッキーな方法を考え出す必要があります。 sass/cssからjavascriptまたはその逆に値を共有するよりきれいな方法はありますか？

javascriptcsssass
23
Jeremy Smith

サーバーサイドスクリプトでsassファイルを読み取り、「解析」して、javascriptに必要な値をエコーできます。

6
Corubba

私の解決策はかなり面白そうだと思います。しかしそれはうまくいきます...

私の_base.scssでは、いくつかの変数を定義しています：

$menu_bg: rgb(45, 45, 45);
$menu_hover: rgb(0, 0, 0);

menu.scssの場合：

@import "base";

#jquery_vars {
  .menu_bg {
    background-color: $menu_bg;
  }
  .menu_hover {
    background-color: $menu_hover;
  }
}

そして、便利なページテンプレートで：

<span class="is_hidden" id="jquery_vars">
  <span class="is_hidden menu_bg"></span>
  <span class="is_hidden menu_hover"></span>
</span>

最後に、これは近くのjQueryスクリプトで許可されます。

var menu_bg = $('#jquery_vars .menu_bg').css("background-color");
var menu_hover = $('#jquery_vars .menu_hover').css("background-color");

これは私の父がバッグをかぶっていてとても醜いです。

jQueryは、ページ要素から任意のCSS値をプルできます。しかし、それらの要素は存在しなければなりません。 HTMLでスパンを作成せずに、生のCSSからこれらの値の一部を取得しようとしましたが、jQueryはundefinedを思い付きました。明らかに、これらの変数がページ上の「実際の」オブジェクトに割り当てられている場合、実際には任意の#jquery_vars要素は必要ありません。同時に、.sidebar-left Nice-menu liはjQueryに変数をフィードするために使用される重要な要素であることを忘れるかもしれません。

誰かが他に何かを持っているなら、それはこれよりもきれいでなければなりません...

11
ericx

Webpackを使用する場合、sass-loaderを使用して次のような変数をエクスポートできます。

$animation-length-ms: $animation-length + 0ms;

:export {
  animationMillis: $animation-length-ms;
}

のようにインポートします

import styles from '../styles/animation.scss'    
const millis = parseInt(styles.animationMillis)

https://blog.bluematador.com/posts/how-to-share-variables-between-js-and-sass/

5
velop

計算された変数値をJSONに抽出するためにネイティブのsass機能を使用する sass-extract を参照することをお勧めします。

また、webpackを使用している場合、 sass-extract-loader を使用すると、const variables = require('sass-extract-loader!./variables.scss');のようにsassファイルを要求/インポートし、sass変数を素敵なJSONに入れることが非常に簡単になりますオブジェクト。

@importステートメントもサポートしているため、変数を異なるファイルに分離することができ、追加の前処理を追加したり、変数でjsonファイルを分離したりする必要はありません。

他の回答で述べられているように、これを達成する多くの代替方法があり、どの方法を選択するかは、ユースケースと環境によって異なります。

免責事項、私は上記の両方のライブラリの作成者です。

4
jgranstrom

JSONを使用してSassとJavaScriptの間でデータを共有する方法がいくつかあることを付け加えておきます。以下は、さまざまな手法の詳細を説明する記事へのリンクです。

JSONインポートがSassでネイティブにサポートされるようになるまでは、おそらく時間の問題です。

4
Teo Dragovic

sass-ffi トリックを実行する必要がありますが、逆の方法（JSからSASS/SCSSへ）です。これは、ffi-requireという関数を定義し、SASSからrequire .jsファイルを作成できるようにします。

config.js：

module.exports = {
     maxColumns: 4,
};

style.scss：

$max-columns: ffi-require('./config', 'maxColumns');

sass-loader（webpack）およびnode-sassで動作します。

1
futpib

別の方法は、JavaScriptに必要な構造を生成できるようにgulp-templateを使用することです。

Gulp-templateでGulpを使用してJavascriptとSassの間で変数を共有する https://youtu.be/UVeUq8gMYco

ゼロから作成されるので、最初から見ることができ、git repoがあり、最終結果が得られます。

https://github.com/PocketNin​​jaCoUk/shared-js-sass-vars-using-gulp/tree/master/dev

あなたは基本的にあなたの設定オブジェクトを持っています

./dev/config.jsに保存

module.exports = {
  defaults: {
    colours: {
      primary: '#fc0'
    },
    sizes: {
      small: '100px',
      medium: '500px',
      large: '1000px'
    },
    zIndex: {
      model: 100,
      dropdown: 50,
      header: 10
    }
  }
}

次に、SassとJavaScriptの両方、またはそれ以下のテンプレートを使用します。

Sassアンダースコアテンプレート

./dev/templates/sass-config.txtに保存

<% _.each(defaults, function(category, key) { %>
  // Var <%= key %>
  <% _.each(category, function(value, key) { %>
    $<%= key %>: <%= value %>;
  <% }) %>
<% }) %>

JavaScriptアンダースコアテンプレート

./dev/templates/js-config.txtに保存

namespace.config = {};

<% _.each(defaults, function(monkey, key) { %>
  namespace.config.<%= key %> = {
  <% i = 1 %>
  <% _.each(monkey, function(value, key) { %>
    <% comma = (Object.keys(monkey).length === i) ? '': ',' %>
    <% if(typeof value === 'string') {%>
      <%= key %>: '<%= value %>'<%= comma %>
    <%} else { %>
      <%= key %> : <%= value %><%= comma %>
    <% } %>
    <% i++ %>
  <% }); %>
  };
<% }) %>

次に、それをコンパイルするために一口

var gulp = require('gulp');
var template = require('gulp-template');
var rename = require('gulp-rename');
var removeEmptyLines  = require('gulp-remove-empty-lines');

var sharedVars = require('./dev/config');

gulp.task('compile', function() {
  gulp.src('./dev/templates/sass-config.txt')
    .pipe(template(sharedVars))
    .pipe(rename('_sass-config.scss'))
    .pipe(removeEmptyLines())
    .pipe(gulp.dest('./dev/sass'));

  gulp.src('./dev/templates/js-config.txt')
    .pipe(template(sharedVars))
    .pipe(rename('js-config.js'))
    .pipe(removeEmptyLines())
    .pipe(gulp.dest('./dev/js'));
});
1
Pocketninja

これは gulp-sass-vars-to-js を使用して実行できます。 .scssファイルから.jsファイルを生成します。 .jsファイルには、.scssファイルで宣言されたすべての変数が含まれています。次に、この生成されたjsを.jsに「要求」できます

0
user2486738