快捷導(dǎo)航

如何在vite初始化項目中安裝scss以及scss的使用

更新時間：2022年10月18日 10:02:35 作者：m0_63466615

今天想要給vite項目,添加全局的scss變量文件引用,這樣我們在使用scss變量和函數(shù)的時候就不需要每個組件都取引用了,下面這篇文章主要給大家介紹了關(guān)于如何在vite初始化項目中安裝scss以及scss使用的相關(guān)資料,需要的朋友可以參考下

1.scss安裝

（1）打開終端輸入，

npm install sass -d

（2）在src/assets文件夾下新建 style文件夾(文件名可以自定義)，在文件夾下新建main.scss文件

（3）在vite.config.js中配置

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData:'@import "./src/assets/style/main.scss";'
      }
    }
  }
})

2.scss的簡單使用

(1)變量的定義

例如：$blue: #3385ff

$表示這是一個變量；blue表示這個變量的名稱；#3385ff代表這個變量的值

（2）簡單使用

在HelloWorld.vue文件的style區(qū)

<style lang='scss'>
    body{
        background-color: $blue
    }
</style>

如果頁面背景變成了剛定義的顏色，說明scss使用成功

3.基本語法

變量除了可以定義在全局，也可以在單個頁面中定義

（1）!default的使用

$color-green: #0f0;
$color-green: #f55 !default;

這里這個變量的值，最終會顯示為綠色，這是因為，!default的含義是，如果這個變量沒有被賦值，那么就賦默認(rèn)值，如果在其他地方被賦值，就取在其他地方被賦的值，可以理解為把這個默認(rèn)值的優(yōu)先級降到了最低，當(dāng)沒有其它地方賦值時候，才會選擇默認(rèn)值

（2）變量的取值也可以是變量

$hello: $color-green;

（3）@mixin可以定義一段代碼作為模板樣式

@mixin border-radius($radius: 5px, $borderRadius: 8px) {
  border: {
    radius: $radius;
    top: $borderRadius solid #ff0;
    bottom: $borderRadius solid #f00;
    left: $borderRadius solid #00f;
    right: $borderRadius solid #888;
  }
}

上面的代碼可以看出，@mixin定義的變量，可以傳參數(shù)，并且可以使用es6給函數(shù)參數(shù)默認(rèn)值的方式賦值，且有相同的前綴的屬性例如border，font...,可以把前綴和后邊的拆開來寫

在引用@mixin時，如果不傳值，就會取默認(rèn)的5px,8px，如果傳值就會按參數(shù)位置來取值，例如下面的代碼，取值就是5px,1px

@include border-radius(5px, 1px);

（4）&的使用

&可以引用父元素

  .inner {
    width: 10px;
    height: 10px;
    background-color: $blue;
  }
 
  $hover: #333;
 
  &:hover {
    background-color: $hover;
  }
 
//其實就是
    
  .inner {
    width: 10px;
    height: 10px;
    background-color: $blue;
  }
 
  $hover: #333;
 
  .inner:hover {
    background-color: $hover;
  }

（5）@extend的使用

@extend可以繼承其它代碼段

@mixin btn($width: 50px, $height: 20px, $font-size: 16px) {
  width: $width;
  height: $height;
  font-size: $font-size;
  text-align: center;
  line-height: $height;
  @include border-radius(5px, 1px);
  &:hover {
    opacity: 0.8;
    cursor: pointer;
  }
}
.btn {
  @include btn(80px, 30px, 12px);
  margin: {
    top: 10px;
  }
}
.btn-primary {
  @extend .btn;
  background-color: $light-blue;
  color: $fontColor;
}

這樣.btn-primary就繼承了.btn的所有屬性，后邊再寫自己的特性