# 移动端团购网站

**Repository Path**: planting_qi_cheng/group-buying-website

## Basic Information

- **Project Name**: 移动端团购网站
- **Description**: 移动端团购网站，一共五个页面
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-07-20
- **Last Updated**: 2024-01-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 团购网站

## 介绍
技术栈：HTML+CSS+SCSS实现的静态移动端团购网站
### 安装sass
安装sass之前必须安装ruby环境
官网：https://www.sass.hk/install/
务必以管理员身份运行，安装时，注意勾选`Add Ruby executables to your PATH`，将ruby添加到系统环境变量。

安装完后在CMD中运行
```
ruby -v
# 安装成功，会打印如下信息
ruby 3.x.xp64 (2021-04-05 revision 0fb782ee38) [x86_64-darwin19]
```
完成ruby的安装后，在cmd中执行以下命令
```
gem install sass
gem install compass
```
安装完成后，检查是否安装成功
```
sass -v
```

#### 编译sass文件

##### 通过终端指令编译
一般直接进入项目的根目录打开终端

##### 多文件编译
```
sass --watch scss:css
```

##### 单文件编译

```
sass --watch scss/xx.scss:css/xx.css
```

#### 使用插件编译
在 vscode 插件中心安装 `Live Sass Compiler` 这个插件，安装完后，还需要稍微设置一番。

由于插件默认的编译生成路径是 scss 文件所在的目录，这里就需要更改一下输出的路径

```
"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "~/../css"
    },
  	{
        "format": "compressed",
        "extensionName": ".min.css",
        "savePath": "~/../css"
    }
],
```
移动端团购网站，一共五个页面分为index.html、category.html、discovery.html、me.html、detail.html