15

私は周りを見回して、あなたのhtmlにsass変数をjavascriptに渡すための専用のタグがある1つの解決策を見てきました。私はからの2番目の答えについて話している

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

私もhtmlを使ってみました

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

CSSで

.selector { content: "stuff"; }

しかし、開発者ツールでdomを見ると、レンダリングされたページに表示されているのに追加されていないため、javascriptで拾うことができません

$('.selector').text()

誰もがそれをどのように行うのですか？

4

4 に答える 4

4

contentCSSプロパティを介してSASS変数を注入することは、非常にハックな方法だと思います。

代わりに、変数を別の場所に保存して、SASS と JS の両方で読み取ることができます。

まず、ブレークポイントのリストをbreakpoints.jsonファイル に保存します。

["0", "300px", "500px", "700px", "900px", "1100px"]

次に、Ruby を使用してこの JSON ファイルを読み取り、その内容を SASS 関数を介して SASS リストとして使用できるようにします。これをコンパスに入れますconfig.rb： 

sass_options = { :custom => {'breakpoint_file' => 'breakpoints.json'} }

# This creates a SASS function debug() that returns $debug into SASS
module Sass::Script::Functions
  def breakpoints

    # Reading an array of breakpoints into a file
    unless breakpoints_array_raw = JSON.load( IO.read( options[:custom]['breakpoint_file'] ))
      raise Sass::SyntaxError.new("Error: Breakpoints file '#{options[:custom]['breakpoint_file']}' does not exist.")
    end

    # Converting strings in the array to SASS String literals
    breakpoints_array_sassy = breakpoints_array_raw.map { |s| Sass::Script::String.new(s) }

    # Returning the list into SASS
    Sass::Script::List.new( breakpoints_array_sassy, :space )
  end
end

SASS コードでは、次のようなブレークポイントを読み取ります。

$breakpoints: breakpoints()

JS では、jQuery の.getメソッドを使用して、次のように JSON ファイルを要求します。 

var
  breakpoints = [],
  requestBreakpoints = $.get('breakpoints.json');

requestBreakpoints.done(function (response, textStatus, jqXHR){
    breakpoints = response; // You might want to remove "px" here
});

このセットアップを組み立てていたとき、既存のソリューションを見つけましたhereが、お気に入りの SASS ツールであるSingularityとBreakpoint Slicerを使用して再実装することにしました。

あなたの便宜のために、私は概念実証のGitHub プロジェクトを構築しました。:)

そして、ここにライブデモがあります！

于 2013-08-27T10:24:13.343 に答える