第一个 SCSS 编写与编译

1. 创建 scss 文件

如：在 D:\scss\ 目录下创建一个 test.scss 文件

2. 编写 scss

编写以下 scss 代码 :

/* 定义变量与值 */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 16px;

/* 使用变量 */
.test-box {
  background-color : $bgcolor;
  color : $textcolor;
  font-size : $fontsize;
}

3. 编译 scss

使用 sass scss文件路径编译后输出文件 命令编译 scss :

sass test.scss test.css

4. 使用编译后的 css

其实最终我们使用的是编译后的 css 文件，在 html 中引入 css 文件，然后使用它们即可：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="test.css" />
<title>Document</title>
</head>
<body>
    <div class="test-box">hi...</div>
</body>
</html>