作者：Marko Ilic翻譯：瘋狂的技術(shù)宅
JavaScript 和 CSS 已經(jīng)并存超過(guò)了 20 年。但是在它們之間共享數(shù)據(jù)非常困難。當(dāng)然也有大量的嘗試。但是我所想到的是一些簡(jiǎn)單而直觀(guān)的內(nèi)容——不涉及結(jié)構(gòu)更改，而是使用 CSS 自定義屬性甚至 Sass 變量。
自定義屬性在這里應(yīng)該不會(huì)令人感到驚訝。自瀏覽器提供支持以來(lái)，他們一直在做的一件事就是與 JavaScript 協(xié)同工作以設(shè)置和操作值。
不過(guò)具體來(lái)說(shuō)，我們可以通過(guò)幾種方式使 JavaScript 與自定義屬性一起工作。可以使用 setProperty 設(shè)置自定義屬性的值：
document.documentElement.style.setProperty("--padding", 124 + "px"); // 124px我們還可以用 JavaScript 中的 getComputedStyle 來(lái)檢索 CSS 變量。其背后的邏輯非常簡(jiǎn)單：自定義屬性是樣式的一部分，因此它們是計(jì)算樣式的一部分。
getComputedStyle(document.documentElement).getPropertyValue('--padding') // 124px與 getPropertyValue 一樣。這樣我們就可以從 HTML 標(biāo)記的內(nèi)聯(lián)樣式中獲得自定義屬性值。
document.documentElement.style.getPropertyValue("--padding'"); // 124px請(qǐng)注意，自定義屬性是有作用域的。這意味著我們需要從特定元素獲取計(jì)算樣式。正如我們之前在:root 中定義變量一樣，我們將它們放在 HTML 元素上。
Sass 是一種預(yù)處理語(yǔ)言，這意味著它在成為網(wǎng)站的一部分之前就已經(jīng)變成了 CSS。所以無(wú)法用與 CSS 自定義屬性相同的方式從 JavaScript 訪(fǎng)問(wèn)它們（可以在 DOM 中以計(jì)算樣式訪(fǎng)問(wèn)它們）。
我們需要通過(guò)修改自己的構(gòu)建過(guò)程來(lái)改變這一點(diǎn)。我懷疑在大多數(shù)情況下并不需要做太多，因?yàn)檠b載程序通常已經(jīng)是構(gòu)建過(guò)程的一部分。但是如果你的項(xiàng)目并非如此，則我們需要三個(gè)模塊，這些模塊能夠?qū)牒头g Sass 模塊。
在 Webpack 配置中看上去是這樣：
module.exports = { // ... module: { rules: [ { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] }, // ... ] }};為了使 Sass（或者在這種情況下，具體來(lái)說(shuō)是 SCSS）變量可用于 JavaScript，我們需要 “export” 它們。
// variables.scss$primary-color: #fe4e5e;$background-color: #fefefe;$padding: 124px;:export { primaryColor: $primary-color; backgroundColor: $background-color; padding: $padding;}:export 塊是 webpack 用來(lái)導(dǎo)入變量的。這種方法的好處是，我們可以用 camelCase 語(yǔ)法重命名變量，然后選擇要公開(kāi)的內(nèi)容。
然后，把 Sass 文件（variables.scss）導(dǎo)入 JavaScript，從而可以訪(fǎng)問(wèn)文件中定義的變量。
import variables from './variables.scss';/* { primaryColor: "#fe4e5e" backgroundColor: "#fefefe" padding: "124px" }*/document.getElementById("app").style.padding = variables.padding;值得一提的是對(duì) :export 語(yǔ)法的一些限制：
它必須在頂層，但可以在文件中的任何位置。
如果文件中有多個(gè)，則將 key 和 value 組合在一起一并導(dǎo)出。
如果特定的 exportedKey 被復(fù)制，則最后一個(gè)（按源順序）優(yōu)先。
exportedValue 可以含有在 CSS 聲明值中任何有效的字符（包括空格）。
exportedValue 不需要被引用，因?yàn)樗呀?jīng)被當(dāng)作文本字符串了。
有很多方法可以方便地訪(fǎng)問(wèn) JavaScript 中的 Sass 變量。我傾向于使用這種共享斷點(diǎn)的方法。下面是我的breakpoints.scs 文件，后來(lái)我將其導(dǎo)入 JavaScript 中，這樣我可以用 matchMedia()方法得到一致的斷點(diǎn)。
// 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.}動(dòng)畫(huà)是另一個(gè)用例。動(dòng)畫(huà)的持續(xù)時(shí)間通常存儲(chǔ)在 CSS 中，但是需要 JavaScript 的幫助才能完成更復(fù)雜的動(dòng)畫(huà)。
// animation.scss$global-animation-duration: 300ms;$global-animation-easing: ease-in-out;:export { animationDuration: strip-unit($global-animation-duration); animationEasing: $global-animation-easing;}請(qǐng)注意，在導(dǎo)出變量時(shí)，我用了自定義 strip-unit 函數(shù)。這使我可以輕松地在 JavaScript 中解析內(nèi)容。
// main.jsdocument.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 之間交換數(shù)據(jù)。共享這樣的變量使代碼簡(jiǎn)單而不啰嗦。
當(dāng)然還有多種方法可以實(shí)現(xiàn)相同的目的。 Les James 分享了一種有趣的方法，該方法允許 Sass 和 JavaScript 通過(guò) JSON 進(jìn)行交互。我對(duì)此可能存有偏見(jiàn)，但是我發(fā)現(xiàn)在這里介紹的方法是最簡(jiǎn)單、最直觀(guān)的。無(wú)需對(duì)你已經(jīng)在使用和正在編寫(xiě)的 CSS 和 JavaScript 進(jìn)行瘋狂的修改。
聯(lián)系客服
