3

DOM CSSスタイリングを含む再利用可能なJavascriptスニペット（jQueryプラグイン）を書いています。誰でも使用できるはずなので、CSSクラス名とドキュメント上の他の既存のクラスとの競合を避けたいと思います。そのため、すべてのクラス名のプレフィックスとして名前空間文字列を使用しています（たとえば、プレフィックスがの場合、クラスgridはになります）。DRYを尊重し、簡単に変更できるようにするために、プレフィックスを1回だけ宣言し、CSSスプレッドシート（​​おそらくSassを使用）とJavascriptコードの両方からプレフィックスにアクセスしたいと思います。可能であれば、2つのファイル（私の.jsと私の.css）だけで続行したいと思います。prfx-gridprfx-

（S）CSSとJavascriptの両方からアクセスできるように、そのようなプレフィックス/名前空間定数を宣言する方法はありますか？

4

2 に答える 2

1

一箇所だけで定義する簡単な方法がわかりません。ただし、JavaScriptで1回、SASSで1回という、2つの場所でのみ定義するのは簡単です。javascriptではグローバル変数を使用できます（または定数値を保存します）。SASSでは次のようにプレフィックスを定義できます。

$prefix: 'prfx-';

.#{$prefix}grid {
    /* compiles to .prfx-grid */
}

.#{$prefix}other {
    /* and so on */
}

javascriptとCSSの両方で単一の定義を使用するほど良くはないかもしれませんが、2つの場所で変更することは、グローバルなfind-replaceよりも確かに優れています。理論的には、JavascriptコードがAJAX経由でアクセスできるファイルからプレフィックス値を読み取るRuby拡張機能をSASSに追加することもできますが、そのようなシステムはそれを取得するために余分な努力をする価値がないようです。正しく設定して動作します。

于 2012-05-31T13:30:40.360 に答える
0

疑似要素を定義し、contentCSSのプロパティを使用してSCSSプレフィックスをJavaScriptに送信できます。この例で使用<body>していますが、任意の疑似要素である可能性があります。

$prefix: 'myPrefix';

body::after {
  // Value must be quoted, so we use
  // string interpolation to print variable
  content: '#{$prefix}';
}

次に、JavaScriptは実行時にこのテキストを検索し、プレフィックスとして使用できます。

// pseudos can't be selected like normal DOM elements due to
// browser specs, but you can grab computed styles and remove
// the quotes yourself.
var prefix = window.getComputedStyle(document.body, '::after').getPropertyValue('content').replace(/"/g,'');
// result: 'myPrefix'

計算されたスタイルをフェッチすると、リフロー/レイアウト/ペイントが発生しますが、これを1回だけ実行する場合は、世界の終わりではありません。

于 2018-01-18T10:34:37.217 に答える