快捷搜索:  汽车  科技

sass需要什么基础?可能是史上最易懂的SASS安装教程

sass需要什么基础?可能是史上最易懂的SASS安装教程b)下载完成后,我们直接打开安装程序,选择english,然后点击Ok,再后续的界面选择i accept the license(我接受许可),然后Next(下一步)如下图选择Start Command…. 弹出如下窗口在里面输入 ruby –v回车 查看我们的安装版本,在图中可以看到安装的版本和我们刚才选择的版本一样;还有一种快捷进入方式查看:win r 打开运行工具在里面输入cmd,后面的操作都一样;不要关闭该窗口!a)首先安装ruby,我这里直接提供ruby的下载地址(尾部),打开页面后会看到如下图SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。SASS的安装重要:SASS依赖于ruby环境,所以我们在安装SASS前,先安装ruby

如果文章样式不是很理想,在阅读上带来了很多障碍,有问题可以在下面回复给我,我会一个一个处理,建议头条添加上源码文档

如果你已经进入文章了,那么你可能对sass有一些了解,或者正在想要学习了解它。本文将带你了解SASS的安装过程:

演示环境:操作系统:window7 64位

SASS是什么?为什么要使用SASS

SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。

SASS的安装

重要:SASS依赖于ruby环境,所以我们在安装SASS前,先安装ruby

a)首先安装ruby,我这里直接提供ruby的下载地址(尾部),打开页面后会看到如下图

sass需要什么基础?可能是史上最易懂的SASS安装教程(1)

根据自己的环境情况选择对应的版本,我这里测试是选择下载的2.2.3版本的64位安装包。

b)下载完成后,我们直接打开安装程序,选择english,然后点击Ok,再后续的界面选择i accept the license(我接受许可),然后Next(下一步)如下图

sass需要什么基础?可能是史上最易懂的SASS安装教程(2)


选择Start Command…. 弹出如下窗口

sass需要什么基础?可能是史上最易懂的SASS安装教程(3)

在里面输入 ruby –v回车 查看我们的安装版本,在图中可以看到安装的版本和我们刚才选择的版本一样;还有一种快捷进入方式查看:win r 打开运行工具在里面输入cmd,后面的操作都一样;不要关闭该窗口!

e)到这里为止我们的ruby安装好了,那么我们可以试着安装SASS,我们继续在使用命令来安装SASS:gem install sass

sass需要什么基础?可能是史上最易懂的SASS安装教程(4)

我们可以看到红色框内有一个ERROR说明我们的安装并不成功在国内的网络并不是很理想;我们可以先来看一下我们的安装源来自于哪里;继续使用命令gem sources –l;我们会看到返回给我们的信息是https://rubygems.org 既然他们不行那么我们来切换它,也是我们的解决方法。

f)解决方案:先清除我们的现在源,在添加国内提供的镜像;使用命令来清除原镜像:gem sources –remov https://rubygems.org 然后添加新的镜像 gem cources –a http://gems.ruby-china.org 然后等待一会儿,成功之后使用再使用命令 gem sources –l 查看源 如果切换成功这时候我们看到的源已经是http://gems.ruby-china.org

sass需要什么基础?可能是史上最易懂的SASS安装教程(5)

g)我们现在再来安装SASS:gem install sass 等待安装,成功之后使用sass –v查看安装的sass版本

sass需要什么基础?可能是史上最易懂的SASS安装教程(6)

到这里我们的SASS已经安装成功。我们来回顾一次整个安装过程首先要了解知道sass是依赖于ruby环境,再安装ruby,在安装过程中注意选择把ruby添加到环境变量中去,安装成功ruby后。安装sass,首先又需要切换国内镜像http://gems.ruby.china.org 然后安装sass :gem install sass

拓展:SASS更新 gem update sass;帮助:sass –h

前面在安装ruby中提到需要把ruby添加到环境变量中去,如果不添加我们在使用命令时候回给我们返回不是内部命令,以至于不能正常的进行下去,所以注意这一点;如果在安装中忘记添加了,我们需要手动添加,这里就不提供方法了,可以上百度,度一度。

其他:在后面会更新SASS的编译与语法。不会很久

ruby下载地址:http://rubyinstaller.org/downloads

猜您喜欢: