一、什么是SCSS

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

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

• SCSS代表Sassy CSS。與Sass不同，SCSS并非基于縮進(jìn)。
• .sass擴(kuò)展名用作Sass的原始語法，而SCSS通過.scss擴(kuò)展名提供更新的語法。
• 與Sass不同，SCSS與CSS一樣具有花括號(hào)和分號(hào)。
• 與SCSS相反，Sass很難閱讀，因?yàn)樗cCSS截然不同。這就是為什么SCSS成為更推薦的Sass語法的原因，因?yàn)樗子陂喿x，并且與Native CSS非常相似，同時(shí)又享受了Sass的強(qiáng)大功能。

SCSS更加優(yōu)秀！

三、Vue中安裝SCSS

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

??安裝SCSS

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

cnpm i -D node-sass sass-loader

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

??運(yùn)行項(xiàng)目進(jìn)行測(cè)試

輸入以下命令運(yùn)行項(xiàng)目

npm run dev

運(yùn)行成功~

四、項(xiàng)目中使用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~

補(bǔ)充：全局引用scss

先安裝這個(gè)插件來進(jìn)行全局引用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文件路徑
    }
  }
)

項(xiàng)目里每個(gè)組件都可以直接用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項(xiàng)目的控制指令：@each $var in $List{}
• 條件判斷循環(huán)：@while 條件{…}
• 用戶自定義的函數(shù)：@function 名稱(參數(shù)1，參數(shù)2…){…}
  警告和錯(cuò)誤的提示：
• @warn “…”------------------------在終端輸出警告
• @error “…”----------------在.css文件和終端輸出錯(cuò)誤

總結(jié)

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

最新評(píng)論