## Sass 初体验
【step1】在Hbuilder编辑器中,新建一个 style.scss的文件,
【step2】打开style.scss文件,并写入以下代码:
~~~
$w: 100px;
$h: 200px;
$red: red;
.header {
width: $w;
height: $h;
color: $red;
h1 {
width: $h;
height: $w;
background: $red;
}
}
~~~
【step3】鼠标右键,选择编译,然后点击 “确定”即可得到编译文件 style.css
![](https://box.kancloud.cn/464928949bc070afbfbedd7b2c7fd9d2_620x704.png)
【step4】打开生成的style.css文件,观察编译后的文件,如图:
![](https://box.kancloud.cn/b6a5c8671cbcbbc92a82e0251994fcad_327x384.png)