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

成都創新互聯公司長期為數千家客戶提供的網站建設服務，團隊從業經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯網生態環境。為應城企業提供專業的網站設計制作、做網站，應城網站改版等技術服務。擁有十年豐富建站經驗和眾多成功案例,為您定制開發。

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

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

隨著大型單頁應用程序的興起，Javascript和CSS越來越交織在一起。通常在兩個值之間復制值（例如，與React的CSSTransitionGroup一起使用的動畫持續時間或將品牌顏色傳遞到圖形庫中）。但是，保持兩個具有相同值的副本不可避免地導致僅更新一個副本并最終導致令人沮喪的錯誤。幸運的是，使用webpack和CSS模塊，有更好的方法。在此博客文章中，我們將通過上述示例為共享動畫持續時間，探討如何在腳本和樣式之間共享變量CSSTransitionGroup。

第一步是安裝我們的依賴項：

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

接下來，我們需要配置webpack以便使用，sass-loader以便我們可以從Javascript訪問我們的Sass代碼。

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

現在開始有趣的部分。我們在Sass中定義實際的變量值，并將其導出到Javascript。CSS模塊有一個名為的簡潔實用程序:export。該:export指令的工作原理基本上類似于ES6的export關鍵字。您的Sass代碼將導出一個對象，其中包含要在Javascript中使用的變量名稱及其關聯的值。這些值都導出為字符串。

  // 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;
  }

您會注意到，我們首先在一個變量中聲明整數值，然后在另一個變量中將0ms其添加。這樣一來，我們就只能導出，"250"而不是"250ms"在Javascript方面更容易解析（將0ms數字強制將其“類型”插入ms）。

現在，在Javascript中，我們只需要從樣式表中導入樣式，然后從導出的變量中解析出一個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}
/>

...

這種方法非常簡單，但是當您避免在Javascript和Sass之間同步更改的麻煩時，它會成倍地回報。

以上是“在Javascript和Sass實現共享變量的方法”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！

當前題目：在Javascript和Sass實現共享變量的方法-創新互聯
URL鏈接：http://vcdvsql.cn/article34/cedose.html

成都網站建設公司_創新互聯，為您提供面包屑導航、虛擬主機、動態網站、網站導航、搜索引擎優化、網站改版

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯