讓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("--padding"); // 124px

請注意，自定義屬性是作用域的。這意味著我們需要從特定元素獲取計算樣式。由於我們之前在:root中定義了變量，因此我們在HTML元素上獲取它們。

Sass變量和JavaScript

Sass是一種預處理語言，這意味著它在成為網站的一部分之前會被轉換為CSS。因此，無法像CSS自定義屬性那樣（作為計算樣式在DOM中訪問）從JavaScript訪問它們。

我們需要修改構建過程來改變這一點。我懷疑在大多數情況下並不需要這樣做，因為加載器通常已經是構建過程的一部分。但如果你的項目並非如此，我們需要三個能夠導入和轉換Sass模塊的模塊。

以下是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.scss文件，稍後我會將其導入JavaScript，以便可以使用matchMedia()方法獲得一致的斷點。

 // 定義斷點值的Sass變量$breakpoints: (
  mobile: 375px,
  tablet: 768px,
  // etc.
);

// 用於編寫媒體查詢的Sass變量$media: (
  mobile: '(max-width: #{map-get($breakpoints, mobile)})',
  tablet: '(max-width: #{map-get($breakpoints, tablet)})',
  // etc.
);

// 使Sass變量可在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之間交換數據讓我感到高興。像這樣共享變量使代碼簡潔且DRY。

當然，還有多種方法可以實現相同的功能。 Les James在2017年分享了一種有趣的方法，允許Sass和JavaScript通過JSON進行交互。我可能會有偏見，但我認為我們在這裡介紹的方法是最簡單和最直觀的方法。它不需要對您已經使用和編寫的CSS和JavaScript的方式進行瘋狂的更改。

您是否在其他地方使用過其他方法？請在評論中分享——我很想了解您是如何解決這個問題的。

以上是讓JavaScript與CSS和SASS交談的詳細內容。更多資訊請關注PHP中文網其他相關文章！