JavaScript與CSS和Sass的交互示例

這篇“JavaScript與CSS和Sass的交互示例”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“JavaScript與CSS和Sass的交互示例”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價值，內(nèi)容詳細步驟清晰，細節(jié)處理妥當(dāng)，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內(nèi)容吧。

JavaScript是什么

JavaScript是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，JavaScript是被廣泛用于客戶端的腳本語言，最早是在HTML網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。

JavaScript 和 CSS 已經(jīng)并存超過了 20 年。但是在它們之間共享數(shù)據(jù)非常困難。當(dāng)然也有大量的嘗試。但是我所想到的是一些簡單而直觀的內(nèi)容——不涉及結(jié)構(gòu)更改，而是使用 CSS 自定義屬性甚至 Sass 變量。

CSS 自定義屬性和 JavaScript

自定義屬性在這里應(yīng)該不會令人感到驚訝。自瀏覽器提供支持以來??，他們一直在做的一件事就是與 JavaScript 協(xié)同工作以設(shè)置和操作值。

不過具體來說，我們可以通過幾種方式使 JavaScript 與自定義屬性一起工作。可以使用 setProperty 設(shè)置自定義屬性的值：

document.documentElement.style.setProperty("--padding", 124 + "px"); // 124px

我們還可以用 JavaScript 中的 getComputedStyle 來檢索 CSS 變量。其背后的邏輯非常簡單：自定義屬性是樣式的一部分，因此它們是計算樣式的一部分。

getComputedStyle(document.documentElement).getPropertyValue('--padding') // 124px

與 getPropertyValue 一樣。這樣我們就可以從 HTML 標(biāo)記的內(nèi)聯(lián)樣式中獲得自定義屬性值。

document.documentElement.style.getPropertyValue("--padding'"); // 124px

請注意，自定義屬性是有作用域的。這意味著我們需要從特定元素獲取計算樣式。正如我們之前在:root 中定義變量一樣，我們將它們放在 HTML 元素上。

Sass 變量和 JavaScript

Sass 是一種預(yù)處理語言，這意味著它在成為網(wǎng)站的一部分之前就已經(jīng)變成了 CSS。所以無法用與 CSS 自定義屬性相同的方式從 JavaScript 訪問它們（可以在 DOM 中以計算樣式訪問它們）。

我們需要通過修改自己的構(gòu)建過程來改變這一點。我懷疑在大多數(shù)情況下并不需要做太多，因為裝載程序通常已經(jīng)是構(gòu)建過程的一部分。但是如果你的項目并非如此，則我們需要三個模塊，這些模塊能夠?qū)牒头g 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 用來導(dǎo)入變量的。這種方法的好處是，我們可以用 camelCase 語法重命名變量，然后選擇要公開的內(nèi)容。

然后，把 Sass 文件（variables.scss）導(dǎo)入 JavaScript，從而可以訪問文件中定義的變量。

import variables from './variables.scss';

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

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

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

• 它必須在頂層，但可以在文件中的任何位置。

• 如果文件中有多個，則將 key 和 value 組合在一起一并導(dǎo)出。

• 如果特定的 exportedKey 被復(fù)制，則最后一個（按源順序）優(yōu)先。

• exportedValue 可以含有在 CSS 聲明值中任何有效的字符（包括空格）。

• exportedValue 不需要被引用，因為它已經(jīng)被當(dāng)作文本字符串了。

有很多方法可以方便地訪問 JavaScript 中的 Sass 變量。我傾向于使用這種共享斷點的方法。下面是我的breakpoints.scs 文件，后來我將其導(dǎo)入 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.
}

動畫是另一個用例。動畫的持續(xù)時間通常存儲在 CSS 中，但是需要 JavaScript 的幫助才能完成更復(fù)雜的動畫。

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

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

請注意，在導(dǎo)出變量時，我用了自定義 strip-unit 函數(shù)。這使我可以輕松地在 JavaScript 中解析內(nèi)容。

// 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 之間交換數(shù)據(jù)。共享這樣的變量使代碼簡單而不啰嗦。

當(dāng)然還有多種方法可以實現(xiàn)相同的目的。 Les James 分享了一種有趣的方法，該方法允許 Sass 和 JavaScript 通過 JSON 進行交互。我對此可能存有偏見，但是我發(fā)現(xiàn)在這里介紹的方法是最簡單、最直觀的。無需對你已經(jīng)在使用和正在編寫的 CSS 和 JavaScript 進行瘋狂的修改。

感謝你的閱讀，希望你對“JavaScript與CSS和Sass的交互示例”這一關(guān)鍵問題有了一定的理解，具體使用情況還需要大家自己動手實驗使用過才能領(lǐng)會，快去試試吧，如果想閱讀更多相關(guān)知識點的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！