JavaScriptをCSSとSASSと話すようにします

JavaScriptとCSSは20年以上にわたって共存していますが、それらの間でデータを共有することは非常に困難です。もちろん、多くの試みがありましたが、構造を変更する代わりに、CSSカスタムプロパティやSASS変数を活用する代わりに、シンプルで直感的なアプローチを思いつきました。

CSSカスタムプロパティとJavaScript

ここのCSSカスタムプロパティは、それほど驚くべきことではありません。ブラウザがカスタムプロパティのサポートを開始して以来、彼らはJavaScriptで値を設定および操作することができました。

具体的には、いくつかの方法でカスタムプロパティを使用してJavaScriptを使用できます。 setPropertyを使用して、カスタムプロパティの値を設定できます。

 document.documentelement.style.setProperty（ " -  padding"、124 "px"）; // 124px

また、JavaScriptのgetComputedStyleを使用してCSS変数を取得することもできます。その背後にあるロジックは非常に簡単です。カスタムプロパティはスタイルの一部であるため、計算されたスタイルの一部でもあります。

 getComputedStyle（document.DocumentElement）.GetPropertyValue（ ' -  Padding'）// 124px

getPropertyValue 、HTMLタグのインラインスタイルからカスタムプロパティ値を取得できるようにするための同様の方法でもあります。

 document.documentelement.style.getPropertyValue（ " - パディング"）; // 124px

カスタムプロパティはスコープされていることに注意してください。これは、特定の要素から計算されたスタイルを取得する必要があることを意味します。以前の:rootで変数を定義したため、HTML要素でそれらを取得します。

SASS変数とJavaScript

SASSは前処理言語です。つまり、Webサイトの一部になる前にCSSに変換されます。したがって、CSSカスタムプロパティのようなJavaScriptからアクセスすることはできません（DOMの計算スタイルとしてアクセス）。

これを変更するには、ビルドプロセスを変更する必要があります。ローダーは通常すでにビルドプロセスの一部であるため、ほとんどの場合、これは必要ではないと思います。ただし、プロジェクトに当てはまらない場合は、SASSモジュールをインポートおよび変換できる3つのモジュールが必要です。

Webpack構成の例は次のとおりです。

 module.exports = {
  // ...
  モジュール：{
    ルール：[
      {
        テスト：/\.scss$/、
        使用：["Style-Roader"、 "css-roader"、 "sass-roader"]]
      }、
      // ...
    ]
  }
};

JavaScriptで使用可能なSASS（またはより具体的には、ここでSCSS）変数を作成するには、それらを「エクスポート」する必要があります。

 // variables.scss
$プライマリカラー：＃fe4e5e;
$ background-color：#fefefe;
$パディング：124px;

：輸出 {
  プライマリカラー：$プライマリカラー;
  BackgroundColor：$ background-color;
  パディング：$パディング;
}

:exportブロックは、マジックウェブパックが変数をインポートするために使用するものです。このアプローチの利点は、Camelの命名法を使用して変数の名前を変更し、開示するものを選択できることです。

次に、SASSファイル（ variables.scss ）をJavaScriptにインポートし、ファイルに定義された変数にアクセスできるようにします。

 './variables.scss'から変数をインポートします。

/*
  {
    PrimaryColor： "＃fe4e5e"
    BackgroundColor： "#fefefe"
    パディング：「124px」
  }
*/

document.getElementById（ "App"）。style.padding= variables.padding;

:export構文にはいくつかの顕著な制限があります。

• 上位レベルにある必要がありますが、ファイルのどこにでもある必要があります。
• ファイルに複数がある場合、キーと値が結合され、一緒にエクスポートされます。
• exportedKeyが繰り返される場合、最後の（ソースの順序で）優先されます。
• exportedValue 、CSS宣言値に有効な文字（スペースを含む）を含めることができます。
• exportedValue 、すでに文字通りの文字列と見なされているため、引用符を必要としません。

JavaScriptでSASS変数にアクセスすることを利用するには多くの方法があります。この方法を使用してブレークポイントを共有する傾向があります。 breakpoints.scssファイルは次のとおりです。これを後でJavaScriptにインポートしてmatchMedia()メソッドを使用して一貫したブレークポイントを取得できるようにします。

 //ブレークポイント値を定義するSASS変数$ブレークポイント：（
  モバイル：375px、
  タブレット：768px、
  //など
）;

// sass変数$メディアメディアクエリの書き込みに使用される：（
  モバイル： '（max-width：＃{map-get（$ breakpoints、Mobile）}）'、
  タブレット： '（max-width：＃{map-get（$ breakpoints、tablet）}）'、
  //など
）;

// SASS変数をJavaScriptでアクセスできるようにするエクスポートモジュール：エクスポート{
  BreakPointMobile：unquote（Map-Get（$ Media、Mobile））;
  BreakPointTablet：Unquote（Map-Get（$ Media、Tablet））;
  //など
}

アニメーションは別のユースケースです。アニメーションの期間は通常CSSに保存されますが、より複雑なアニメーションにはJavaScriptの助けが必要です。

 // animation.scss
$ Global-Animation-Duration：300ms;
$ global-animation-easing：容易さ。

：輸出 {
  AnimationDuration：Strip-Unit（$ global-animation-duration）;
  アニメーションイースト：$ global-animation-easing;
}

変数をエクスポートするときにカスタムstrip-unit関数を使用したことに注意してください。これにより、JavaScript側のコンテンツを簡単に解析できます。

 // main.js
document.getElementById（ 'Image'）。
  {transform： 'scale（1）'、ofacity：1、offset：0}、
  {transform： 'scale（.6）'、ofacity：.6、offset：1}
]、{
  持続時間：数（変数.AnimationDuration）、
  簡単：変数。
}）;

CSS、SASS、JavaScript間でデータを簡単に交換できることを嬉しく思います。このような変数を共有すると、コードが簡潔に乾燥します。

もちろん、同じ機能を達成するには多くの方法があります。レス・ジェームズは、2017年にSASSとJavaScriptがJSONを介してやり取りできるようにする興味深い方法を共有しました。私は偏っているかもしれませんが、ここで紹介している方法は最も簡単で最も直感的な方法だと思います。既に使用して書いたCSSとJavaScriptの狂気の変更は必要ありません。

他の場所で他の方法を使用しましたか？コメントを共有してください - 私はあなたがこの問題をどのように解決したかを見てみたいです。

以上がJavaScriptをCSSとSASSと話すようにしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。