CSS文件是用來定義網頁樣式的文件。其中，SCSS是CSS的一種預處理器，它可以擴展CSS語法，讓CSS的編寫更加簡單、直觀、易于維護。下面我們就來看看如何設置SCSS文件。

//首先，我們需要安裝一個SCSS編譯工具，比如node-sass
npm install node-sass
//然后，創建一個SCSS文件，并在頭部添加以下代碼
@charset "UTF-8";
//接下來，我們可以定義一些變量，來方便我們在不同的元素中共享一些樣式
$primary-color: #007bff;
$secondary-color: #6c757d;
//定義一個mixin，它可以用來快速設置元素的寬度和高度
@mixin size($width, $height: $width) {
width: $width;
height: $height;
}
//接下來，我們可以定義一些基礎樣式
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #212529;
background-color: #fff;
}
a {
color: $primary-color;
text-decoration: none;
&:hover {
color: darken($primary-color, 10%);
}
}
//最后，在SCSS文件中引入其他的SCSS文件，比如reset.css或者一些組件的樣式
@import "reset.css";
@import "components/nav.scss";

上面的代碼中，我們使用了SCSS的一些特性，比如變量、mixin和引入其他文件。這些特性都可以幫助我們更加方便地編寫CSS樣式。