在Vue 3中，Sass作為一種流行的CSS預處理器被廣泛應用。Sass可以使開發者使用類似于編程語言的方式編寫CSS，提高代碼組織性和可維護性。本文將介紹Vue 3中Sass的使用方法，包括安裝和配置，變量的定義和使用，以及混入和繼承。

安裝和配置Sass

//安裝Sass
npm install -D sass
//安裝Sass的loader
npm install -D sass-loader@^10.1.1 css-loader style-loader

安裝Sass和Sass的loader后，需要在Webpack的配置文件中配置Sass的loader。

//webpack.config.js
module.exports = {
module: {
rules: [
//配置Sass的loader
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
],
},
};

變量的定義和使用

在Sass中，可以使用變量來簡化CSS的編寫。需要使用 $ 符號來定義變量。

//variables.scss
$primary-color: #f00;
$font-size: 16px;
$bg-color: #ccc;

然后在其他Sass的文件中可以使用這些變量。

//style.scss
@import 'variables';
body {
background-color: $bg-color;
font-size: $font-size;
color: $primary-color;
}

混入和繼承

在Sass中，混入和繼承可以實現代碼的復用。

混入是Sass中一種重用樣式的方式。可以將一個定義好的樣式集合放在一個混合器(mixin)中，然后在其他地方調用這個混合器。

//mixins.scss
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
//style.scss
@import 'mixins';
.box {
@include flex-center;
}

繼承是一種重用樣式的方式，可以使一個選擇器繼承另一個選擇器的樣式。

//base.scss
.btn {
color: #fff;
background-color: #000;
border: none;
border-radius: 4px;
}
//style.scss
@import 'base';
.btn-confirm {
@extend .btn;
font-size: 16px;
}

上述例子中，.btn-confirm 繼承了 .btn 的樣式，并新增了一個 font-size 屬性。

總結

本文介紹了Vue 3中Sass的使用方法，包括安裝和配置，變量的定義和使用，以及混入和繼承。使用Sass可以提高CSS的編寫效率和代碼可維護性。