让前端飞Sass语法学习程序员

Sass开发环境安装

2019-01-27  本文已影响44人  OnlyPiglet
每日美图

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的开发环境需要编辑工具的编译器设置

上一篇下一篇

猜你喜欢

热点阅读