JavaScript が CSS および Sass とどのように対話するかを見てみましょう

JavaScript と CSS は 20 年以上にわたって共存してきました。しかし、それらの間でデータを共有することは非常に困難です。もちろん、たくさんの試みがあります。しかし、私が念頭に置いていたのは、構造的な変更を伴うものではなく、CSS カスタム プロパティや Sass 変数を使用するという、シンプルで直感的なものでした。

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

ここでカスタム プロパティが登場するのは当然のことです。ブラウザーがサポートしている限り、ブラウザーが行ってきたことの 1 つは、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("--padding'"); // 124px

カスタム属性にはスコープがあることに注意してください。これは、特定の要素から計算されたスタイルを取得する必要があることを意味します。先ほど

:root で変数を定義したように、それらを HTML 要素に配置します。

Sass 変数と JavaScript

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

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

は Webpack 設定では次のようになります:

module.exports = {
 // ...
 module: {
  rules: [
   {
    test: /\.scss$/,
    use: ["style-loader", "css-loader", "sass-loader"]
   },
   // ...
  ]
 }
};

Sass (またはこの場合は特に SCSS) を有効にするために、変数を使用できます。 JavaScript では、それらを「エクスポート」する必要があります。

// variables.scss
$primary-color: #fe4e5e;
$background-color: #fefefe;
$padding: 124px;

:export {
  primaryColor: $primary-color;
  backgroundColor: $background-color;
  padding: $padding;
}

:export ブロックは、変数をインポートするために webpack によって使用されます。このアプローチの利点は、キャメルケース構文を使用して変数の名前を変更し、公開するものを選択できることです。

次に、Sass ファイル (

variables.scss) を JavaScript にインポートして、ファイル内で定義されている変数にアクセスできるようにします。

import variables from './variables.scss';

/*
 {
  primaryColor: "#fe4e5e"
  backgroundColor: "#fefefe"
  padding: "124px"
 }
*/

document.getElementById("app").style.padding = variables.padding;

:export 構文に関するいくつかの制限について言及する価値があります:

これは最上位にある必要がありますが、ファイル内のどこにでも置くことができます。
ファイルが複数ある場合は、キーと値を結合してエクスポートされます。
特定の
• exportedKey がコピーされる場合、(ソース順で) 最後のものが優先されます。
• exportedValue には、CSS で宣言された値に有効な文字 (スペースを含む) を含めることができます。
• exportedValue はすでにテキスト文字列として扱われるため、引用符で囲む必要はありません。

JavaScript で Sass 変数に簡単にアクセスする方法はたくさんあります。私はこの共有ブレークポイントの方法を好みます。以下は私の

breakpoints.scs ファイルです。後で JavaScript にインポートして、matchMedia() メソッドを使用して一貫したブレークポイントを取得できるようにしました。

// Sass variables that define breakpoint values
$breakpoints: (
  mobile: 375px,
  tablet: 768px,
  // etc.
);

// Sass variables for writing out media queries
$media: (
  mobile: '(max-width: #{map-get($breakpoints, mobile)})',
  tablet: '(max-width: #{map-get($breakpoints, tablet)})',
  // etc.
);

// The export module that makes Sass variables accessible in JavaScript
:export {
  breakpointMobile: unquote(map-get($media, mobile));
  breakpointTablet: unquote(map-get($media, tablet));
  // etc.
}

アニメーションも別の使用例です。アニメーションの長さは通常 CSS に保存されますが、より複雑なアニメーションには JavaScript の助けが必要です。

// animation.scss
$global-animation-duration: 300ms;
$global-animation-easing: ease-in-out;

:export {
  animationDuration: strip-unit($global-animation-duration);
  animationEasing: $global-animation-easing;
}

変数をエクスポートするときに、カスタム

strip-unit 関数を使用したことに注意してください。これにより、JavaScript でコンテンツを簡単に解析できるようになります。

// main.js
document.getElementById('image').animate([
  { transform: 'scale(1)', opacity: 1, offset: 0 },
  { transform: 'scale(.6)', opacity: .6, offset: 1 }
], {
  duration: Number(variables.animationDuration),
  easing: variables.animationEasing,
});

これにより、CSS、Sass、JavaScript の間でのデータ交換が簡単になります。このように変数を共有すると、コードがシンプルになり、冗長さが少なくなります。

もちろん、同じ目標を達成する方法は複数あります。 Les James

は、Sass と JavaScript が JSON 経由で対話できるようにする興味深いアプローチ を共有しました。これについては偏見があるかもしれませんが、ここで紹介した方法が最もシンプルで直感的だと思います。すでに使用したり作成した CSS や JavaScript に大幅な変更を加える必要はありません。

英語の元のアドレス: https://css-tricks.com/getting-javascript-to-talk-to-css-and-sass/

著者: Marko Ilic

プログラミング関連の知識については、プログラミング ビデオをご覧ください。 ！

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