一起看看JavaScript與CSS和Sass如何進行交互-js教程-PHP中文網

一起看看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 進行瘋狂的修改。