本文共 1422 字，大约阅读时间需要 4 分钟。

安装Sass前，确保已安装Ruby环境。通过终端执行命令：gem install sass即可安装Sass。Sass文件通常以.scss为后缀。

在编译Sass时，可以选择四种输出风格：

若需要实时监控文件变化，可以在项目根目录运行以下命令：

sass --watch sass文件路径:css输出路径 --style compressed

也可以指定单个文件进行编译：

sass 单件scss文件路径:css文件路径

以下是一个简单的Sass示例：

@charset "UTF-8";$side: left;$var: 1200px;$mycolor: #cd1217;.rounded {    border-#{$side}-radius: 5px;  }$slide: right;.application {    border-#{$slide}-radius: 5px;  }.class1 {    border: 1px solid #e2e2e2;}.slide-#{$side} {    color: red;  }.class2 {    @extend .class1;    font-size: 120%;  width: 500px + 1000px;}@mixin left {    float: left;  margin-left: 10px;}.aliang {    @include left;  width: $var;  border-left: 2px dotted #ee0000;}@mixin right($value: 10px) {    float: right;  margin-right: $value;}.flex-item {    @include right(50px);  padding: 10px;}.flex-item1 {    @include right;}

编译后的CSS文件会生成如下的内容：

@charset "UTF-8";.rounded {  border-left-radius: 5px;}.application {  border-right-radius: 5px;}.class1, .class2 {  border: 1px solid #e2e2e2;}.slide_left {  color: red;}.class2 {  font-size: 120%;  width: 1500px;}.aliang {  float: left;  margin-left: 10px;  width: 1200px;  border-left: 2px dotted #ee0000;}.flex-item {  float: right;  margin-right: 50px;  padding: 10px;}.flex-item1 {  float: right;  margin-right: 10px;}

以上内容可以根据实际需求进行修改和扩展，确保与项目需求一致。