新建 scss 目录，并在其中新建 style.scss 文件，此外再新建 css 目录，用 于存放 SASS 编译后生成的 CSS 代码文件

在开始之前，你需要有一个清晰的项目结构，通常情况下，现代前端项目会有如下的目录结构：

project/
|-- src/
|   |-- sass/  (新的SCSS源码目录)
|   |   |-- style.scss  (新创建的SCSS文件)
|   |-- css/  (用于存放编译后的CSS文件的新目录)
|-- package.json  (依赖管理文件)
|-- .gitignore  (忽略文件列表)
|-- ... 其他文件...

步骤如下：

1. **新建SCSS目录**：进入项目的`src`文件夹，若不存在`sass`目录，你可以手动创建一个：

cd project/src
mkdir sass

2. **创建style.scss文件**：在`sass`目录下，创建一个名为`style.scss`的文件，这是SCSS的主要入口文件：

touch sass/style.scss

然后打开这个文件，你可以开始编写你的SCSS代码。

3. **新建css目录**：同样在`src`目录下，如果你还没有`css`目录，也创建它：

mkdir css

这个目录将会保存编译后的CSS文件。

4. **编译SCSS到CSS**：使用工具如Node.js的`node-sass`或`sass-loader`配合webpack、Grunt或Gulp等构建工具，当你运行编译命令（比如`npm run build`或`gulp watch`）时，SCSS会被转换成CSS并保存到`css`目录中。

记得在配置文件（例如webpack.config.js、package.json或其他构建工具的配置）中添加对SCSS处理的支持，这样每次修改`style.scss`后，都会自动编译出对应的`style.css`。