Sass的编译和单文件转换

上一节简单介绍了Sass的编译环境,做了Sass使用的前期准备
本节我们简单的使用一个Sass-我们使用的开发工具为WebStorm

1,Sass文件的创建

sass文件格式为.scss或.sass

2,.scss和.sass的区别

@charset "utf-8";

// 定义变量
$box:100px;

//scss语法 - 需要按照严格的CSS语法区分
.box{
  width: $box;
}

//sass语法 - 最后一个要加分号(CSS中最后一个属性可以不加分号)
.box
  width: $box;

3,Sass文件的注释

注释代码:

// 不会被编译

/*
  会被编译
  SCSS
  SASS
*/

---

3.1,koala编译scss文件为.css文件

1,将.scss文件所在文件夹拖入koala 编译为.css文件:

2,自动编译成为.css文件:

3,查看生成.css内容:

@charset "UTF-8";
/*
  会被编译
  SCSS
  SASS
*/

---

3.2,命令方式编译scss文件为.css文件

1,打开控制台输入编译命令:

//进入sass文件夹
Brave:~ Brave$ cd /Users/Brave/WebstormProjects/Sass/2017-01-17/style
//编译单文件 - sass 文件名 生成文件名
Brave:style Brave$ sass common.scss a.css

2,查看编译后的sass文件夹中的文件

3,查看生成内容:

@charset "UTF-8";
/*
  会被编译
  SCSS
  SASS
*/

/*# sourceMappingURL=a.css.map */

---

以上是2种Sass编译方法,还有开发工具自带的设置自动编译的配置日后添加