在Javascript和Sass實(shí)現(xiàn)共享變量的方法

這篇文章主要介紹在Javascript和Sass實(shí)現(xiàn)共享變量的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及定制網(wǎng)站建設(shè)服務(wù),專(zhuān)注于成都企業(yè)網(wǎng)站建設(shè),高端網(wǎng)頁(yè)制作,對(duì)石涼亭等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。專(zhuān)業(yè)網(wǎng)站設(shè)計(jì),網(wǎng)站優(yōu)化推廣哪家好,專(zhuān)業(yè)網(wǎng)站推廣優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。

在環(huán)境之間共享變量是編程的圣杯。以下是在Javascript和

Sass（或CSS！）之間共享變量的方法。

隨著大型單頁(yè)應(yīng)用程序的興起，Javascript和CSS越來(lái)越交織在一起。通常在兩個(gè)值之間復(fù)制值（例如，與React的CSSTransitionGroup一起使用的動(dòng)畫(huà)持續(xù)時(shí)間或?qū)⑵放祁伾珎鬟f到圖形庫(kù)中）。但是，保持兩個(gè)具有相同值的副本不可避免地導(dǎo)致僅更新一個(gè)副本并最終導(dǎo)致令人沮喪的錯(cuò)誤。幸運(yùn)的是，使用webpack和CSS模塊，有更好的方法。在此博客文章中，我們將通過(guò)上述示例為共享動(dòng)畫(huà)持續(xù)時(shí)間，探討如何在腳本和樣式之間共享變量CSSTransitionGroup。

第一步是安裝我們的依賴(lài)項(xiàng)：

npm install sass-loader node-sass webpack --save-dev

接下來(lái)，我們需要配置webpack以便使用，sass-loader以便我們可以從Javascript訪問(wèn)我們的Sass代碼。

  // webpack.config.js
  module.exports = {
   module: {
    rules: [
     {
      test: /\.css$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
     }
    ]
   }
  }

現(xiàn)在開(kāi)始有趣的部分。我們?cè)赟ass中定義實(shí)際的變量值，并將其導(dǎo)出到Javascript。CSS模塊有一個(gè)名為的簡(jiǎn)潔實(shí)用程序:export。該:export指令的工作原理基本上類(lèi)似于ES6的export關(guān)鍵字。您的Sass代碼將導(dǎo)出一個(gè)對(duì)象，其中包含要在Javascript中使用的變量名稱(chēng)及其關(guān)聯(lián)的值。這些值都導(dǎo)出為字符串。

  // styles/animation.scss
  $animation-length: 250;
  $animation-length-ms: $animation-length + 0ms;

  :export {
   animationMillis: $animation-length-ms;
  }

  .component-enter {
   ...

   transition: all $animation-length-ms ease-in;
  }

您會(huì)注意到，我們首先在一個(gè)變量中聲明整數(shù)值，然后在另一個(gè)變量中將0ms其添加。這樣一來(lái)，我們就只能導(dǎo)出，"250"而不是"250ms"在Javascript方面更容易解析（將0ms數(shù)字強(qiáng)制將其“類(lèi)型”插入ms）。

現(xiàn)在，在Javascript中，我們只需要從樣式表中導(dǎo)入樣式，然后從導(dǎo)出的變量中解析出一個(gè)int即可！

// js/animation.js
import styles from '../styles/animation.scss'
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'

const millis = parseInt(styles.animationMillis)

...

<CSSTransitionGroup
 transitionName="component"
 transitionEnterTimeout={millis}
 transitionLeaveTimeout={millis}
/>

...

這種方法非常簡(jiǎn)單，但是當(dāng)您避免在Javascript和Sass之間同步更改的麻煩時(shí)，它會(huì)成倍地回報(bào)。

以上是“在Javascript和Sass實(shí)現(xiàn)共享變量的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

標(biāo)題名稱(chēng)：在Javascript和Sass實(shí)現(xiàn)共享變量的方法
當(dāng)前地址：http://muchs.cn/article16/pdgjgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、Google、、微信公眾號(hào)、做網(wǎng)站、響應(yīng)式網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容