vue怎么使用sass根據(jù)環(huán)境進行樣式判斷區(qū)分

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

使用sass根據(jù)環(huán)境進行樣式判斷區(qū)分

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

首先在webpack -> utils.js 中將環(huán)境變量定義：

然后在sass文件中使用：

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

這樣就可實現(xiàn)css根據(jù)開發(fā)環(huán)境進行樣式編寫了。

vue sass和scss的區(qū)別

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

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

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

• 語法書寫方式不同，Sass 是以嚴格的縮進式語法規(guī)則來書寫，不帶大括號({})和分號(;)，而 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;
}

到此，關(guān)于“vue怎么使用sass根據(jù)環(huán)境進行樣式判斷區(qū)分”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>