一、什么是SCSS

SCSS是成熟、穩(wěn)定、強大的CSS預(yù)處理器，而SCSS是Sass3版本當(dāng)中引入的新語法特性，完全兼容CSS3的同時繼承了Sass強大的動態(tài)功能。

二、SCSS與CSS的區(qū)別

• SCSS代表Sassy CSS。與Sass不同，SCSS并非基于縮進。
• .sass擴展名用作Sass的原始語法，而SCSS通過.scss擴展名提供更新的語法。
• 與Sass不同，SCSS與CSS一樣具有花括號和分號。
• 與SCSS相反，Sass很難閱讀，因為它與CSS截然不同。這就是為什么SCSS成為更推薦的Sass語法的原因，因為它更易于閱讀，并且與Native CSS非常相似，同時又享受了Sass的強大功能。

SCSS更加優(yōu)秀！

三、Vue中安裝SCSS

建議在cmd窗口安裝并使用管理員方式打開

??安裝SCSS

使用阿里云服務(wù)器下載依賴，在國內(nèi)下載會比npm外網(wǎng)下載依賴快一些

cnpm i -D node-sass sass-loader

//vue2.5.2需要降級安裝 
cnpm i -D node-sass@4.14.1 sass-loader@7.3.1

??運行項目進行測試

輸入以下命令運行項目

npm run dev

運行成功~

四、項目中使用SCSS

在vue文件中指定樣式語言為scss

vue代碼

<template>
  <div class="box-container1">
      <el-button type="primary" @click="m1">普通</el-button>
      <span class="span1">Yes</span>
  </div>
</template>

到此完美使用SCSS~

補充：全局引用scss

先安裝這個插件來進行全局引用scss

npm install sass-resources-loader --save-dev

然后修改build文件夾中的utils.js文件

將

 scss: generateLoaders('sass'),

改為

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/assets/index.scss')//這里改為自己的index.scss文件路徑
    }
  }
)

項目里每個組件都可以直接用base.scss文件內(nèi)的變量及樣式了。記得style內(nèi)加上lang=“scss”

<style scoped lang="scss">

?SCSS常用命令

SCSS官方文檔

常用命令

• 混合樣式：@mixin 名字(參數(shù)1，參數(shù)2…){…}
• 取用混合樣式：@include 名字（@mixin的名字）
• 繼承樣式：@extend 需要繼承的類、ID名、自定義的混合樣式等的名字
• 導(dǎo)入scss樣式：@import "scss文件名"
• 條件控制指令：@if 條件{…}
  循環(huán)控制指令：
• @for $var from <開始值> through <結(jié)束值> -----------包括結(jié)束值
• @for $var from <開始值> to <結(jié)束值> ------------不包括結(jié)束值
• 循環(huán)List項目的控制指令：@each $var in $List{}
• 條件判斷循環(huán)：@while 條件{…}
• 用戶自定義的函數(shù)：@function 名稱(參數(shù)1，參數(shù)2…){…}
  警告和錯誤的提示：
• @warn “…”------------------------在終端輸出警告
• @error “…”----------------在.css文件和終端輸出錯誤

總結(jié)

到此這篇關(guān)于Vue2.x安裝并使用SCSS的文章就介紹到這了,更多相關(guān)Vue2.x安裝使用SCSS內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！