一起看看JavaScript與CSS和Sass如何進行交互

JavaScript 和 CSS 已經並存超過 20 年了。但是在它們之間共享數據非常困難。當然也有大量的嘗試。但我所想到的是一些簡單而直觀的內容——不涉及結構更改，而是使用 CSS 自訂屬性甚至 Sass 變數。

CSS 自訂屬性和 JavaScript

自訂屬性在這裡應該不會令人感到驚訝。自從瀏覽器提供支援以來??，他們一直在做的一件事就是與 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 是一種預處理語言，這意味著它在成為網站的一部分之前就已經變成了 CSS。所以無法用與 CSS 自訂屬性相同的方式從 JavaScript 存取它們（可以在 DOM 中以計算樣式存取它們）。

我們需要透過修改自己的建置過程來改變這一點。我懷疑在大多數情況下並不需要做太多，因為裝載程序通常已經是建造過程的一部分。但是如果你的專案並非如此，我們需要三個模組，這些模組能夠導入和翻譯 Sass 模組。

在Webpack 設定中看起來是這樣：

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

為了讓Sass（或者在這種情況下，具體來說是SCSS ）變數可用於JavaScript，我們需要「export」 它們。

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

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

:export 區塊是 webpack 用來導入變數的。這種方法的好處是，我們可以用 camelCase 語法重命名變量，然後選擇要公開的內容。

然後，把 Sass 檔案（variables.scss）匯入 JavaScript，以便存取檔案中定義的變數。

import variables from './variables.scss';

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

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

值得一提的是對 :export 語法的一些限制：

• 它必須在頂層，但可以在檔案中的任何位置。
• 如果檔案中有多個，則將 key 和 value 組合在一起一併匯出。
• 如果特定的 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中文網其他相關文章！