vue怎么使用sass根據環境進行樣式判斷區分

這篇文章主要介紹“vue怎么使用sass根據環境進行樣式判斷區分”，在日常操作中，相信很多人在vue怎么使用sass根據環境進行樣式判斷區分問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue怎么使用sass根據環境進行樣式判斷區分”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

使用sass根據環境進行樣式判斷區分

我們在開發時可能會有需求根據當前vue的環境變量進行樣式區分，說白了就是如何在sass中進行if else，下面將是我的處理方法。

首先在webpack -> utils.js 中將環境變量定義：

然后在sass文件中使用：

div {
  @if ($env == 'production') {
    height: calc(100vh - 332px); // 生產環境展示
  } @else {
    height: calc(100vh - 412px); // 開發環境展示
  }
}

這樣就可實現css根據開發環境進行樣式編寫了。

vue sass和scss的區別

Scss 是 Sass 3 引入新的語法，簡言之可以理解scss是sass的一個升級版本，完全兼容sass之前的功能，又有了些新增能力。語法形式上有些許不同，最主要的就是sass是靠縮進表示嵌套關系，scss是花括號。

Sass 和 SCSS 其實是同一種東西，我們平時都稱之為 Sass，兩者之間不同之處有以下兩點：

• 文件擴展名不同，Sass 是以“.sass”后綴為擴展名，而 SCSS 是以“.scss”后綴為擴展名

• 語法書寫方式不同，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。

示例

sass語法：

$font-stack: Helvetica, sans-serif  //定義變量
$primary-color: #333 //定義變量

body
  font: 100% $font-stack
  color: $primary-color

scss語法：

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;}

編譯出來的 CSS：

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

到此，關于“vue怎么使用sass根據環境進行樣式判斷區分”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！