Sass是一種CSS預編譯器，它可以讓開發者在CSS中使用變量、函數、嵌套等高級語法，提高CSS編寫效率。Vue是一種流行的前端框架，它可以讓開發者更方便地編寫組件化的代碼。Sass和Vue的組合可以讓前端開發變得更加簡單和高效。

在Vue中使用Sass，可以先安裝node-sass和sass-loader庫，使用Vue的CLI腳手架創建項目時也可以直接選擇使用Sass。在組件中引入樣式時，可以使用lang屬性設置為sass，然后在style標簽中編寫Sass代碼。例如：

<style lang="sass">
$primary-color: #42b983;
.button
background-color: $primary-color;
</style>

這樣就可以直接在Vue組件中使用Sass的語法了，編譯后會生成相應的CSS代碼。

在Sass中使用Vue，可以通過配置webpack來實現。使用sass-loader時，可以將Webpack的vue-loader和sass-loader配合使用，使得在Vue組件中引入Sass樣式時可以直接使用Sass的語法。例如：

module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// 加入sass-loader
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
}
}
]
},
// ...
}

這樣，在Vue組件中，就可以直接使用Sass語法：

<template>
<button class="button">Click Me</button>
</template>
<style lang="scss">
$primary-color: #42b983;
.button {
background-color: $primary-color;
}
</style>

這樣就可以同時使用Sass和Vue進行代碼編寫了。

除了使用webpack配置外，還可以通過在Vue中引入Sass庫進行樣式編寫。例如，可以使用node-sass和sass-loader來將Sass轉換成CSS，然后在Vue組件中引入CSS樣式：

<template>
<button class="button">Click Me</button>
</template>
<style>
@import './button.scss';
</style>

這樣，就可以在Vue組件中使用Sass編寫的樣式了。

總而言之，Sass和Vue是可以很好地結合在一起使用的。無論是在Vue組件中編寫Sass樣式，還是在Sass中使用Vue的組件化思想，都可以提高代碼編寫效率，減少重復的樣式代碼，讓前端開發變得更加高效。嘗試使用Sass和Vue，發現它們之間的美妙協作吧！