你的位置:首页 > 网页设计

[网页设计]sass菜鸟教程


1、安装sass

在安装sass前需要安装ruby,下载ruby时要注意自己电脑是32位还是64位,下载好正常安装,但注意一下:要勾选下图这一项,添加环境变量(安装过JDK的朋友应该知道环境变量)

下一步、下一步。。。安装完成后,开始菜单点击:

输入命令:gem install sass 。我猜你会看到安装失败的提醒:

因为默认的sass下载地址https://rubygems.org/被墙了,所以无法连接安装,ping了一下可看到:

可我“翻”了一下“墙”,发现还是不能成功安装,只好作罢,换一个下载地址,淘宝的:https://ruby.taobao.org/ 。 ping一下正常:

接下来要做的就是添加国产淘宝的地址,并把默认被墙掉的地址删除,输入命令: gem sources -a https://ruby.taobao.org/添加淘宝地址:

提示信息有added to sources表示添加成功,可运行命令:gem sources 查看现有的下载地址:

现有两个,一个是默认的,一个是刚添加的淘宝的,必须要把默认的删掉才能安装,运行命令删除默认:gem sources -r https://rubygems.org/  提示removed from sources 说明删除成功。

确保只有一个淘宝的地址,才能成功安装sass:

好,这时可以放心的运行 gem install sass 来安装了:

Perfect!

2.把scss文件编译为css文件

先新建一个.scss文件吧,代码:(虽然sass代码刚写起来生硬,但相信代码还是能看懂啥意思的)

.box { background: #eee; border: 2px solid #ccc; .heading {  font-size: 14px; }}.box2 { @extend .box; padding: 10px;}

我这里保存为test.scss文件,然后用命令行进入保存文件的所在目录(我的是E盘ts文件夹下),然后运行翻译命令: sass test.scss  test.css  把test.scss文件编译为test.css文件(css文件名可以重新取名):

这时再返回文件所在文件夹,你会发现多出了一些文件,其中就有我们想要的test.css文件:

打开test.css文件我们会看到编译好的css代码,对比编译前scss文件源代码可看出sass的厉害之处啦:

.box, .box2 {  background: #eee;  border: 1px solid #ccc;}.box .heading, .box2 .heading {  font-size: 2em; }.box2 {  padding: 10px; }/*# sourceMappingURL=test.css.map */

当然了你也可以把css文件编译为scss文件,输入命令: sass -convert test.css newtest.scss 就能把test.css编译为newtest.scss文件啦,这里就不再赘述。下面就是要学习sass语法的时候了,我也是初学者,共同进步吧。