Sass开发环境安装
Ruby
介绍
sass脚本语言对应的编译器是使用Ruby实现地,所以我们首先需要安装Ruby,以及sass所需要的gem包(就是Ruby支持Sass语法的扩容模块,gem是一款内置工具用于管理Ruby扩容模块)。
我知道这听上去挺奇怪的一个语言的编译器是另一个语言开发的,但这在程序界确实很普遍的,例如Python的编译器是C实现地,php解释器也是用C实现地,Java常用的JVM虚拟机底层也是C++语言编写。
安装
1.首先下载链接中文件夹内的资源https://pan.baidu.com/s/1ZmMfJzqO9oxO5HLe_ihBKQ
2.按照里面的文档与安装软件安装好Ruby
3.在命令行中执行ruby -v,sass -v,compass -v效果如下图
Ruby与Sass模块安装成功WebStorm
介绍
摘录自百度百科
WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。
安装
1.首先下载连接中文件夹的资源
2.按照文件夹内的安装说明与安装软件进行安装
https://pan.baidu.com/s/1SsdZb1iwo1iXPd3zxu5rEg
Sass的解释器以及编译参数设置
打开webstom,选择File->Settings->Tools->File Watchers 选择添加 SCSS Watcher选项卡(ps:因为我们要学习Sass的语法),选项卡上的各参数配置如下
Name: SCSS
File type: SCSS Style Sheet
Scope: Project Files
Program: E:\devefiles\Ruby23-x64\bin\scss.bat(每个人都不一样,此为ruby的scss插件执行脚本的绝对路径在ruby安装目录的bin目录下)
Arguments: --no-cache --update $FileName$:$FileNameWithoutExtension$.css --style expanded(ps"添加的--style expanded是为了编译后可用于开发的css输出格式,我们下一次会看到为什么会这么设置啦,暂时先这样啦)
其它选项保持默认即可
新建一个Empty项目名称为ProjectDemo,并新建css文件类型为scss内容为
$width:5em;
#main {
width:$width;
}
会在scss文件同级目录下生成对应的css文件与css.map文件
#main {
width:5em;
}
/*# sourceMappingURL=Demo.css.map */
至此设置成功,下次就可以正式进入学习啦❤。
总结
1.sass的环境安装需要Ruby编译器与对应支持的sass、compass模块。
2.sass的开发环境需要编辑工具的编译器设置