1. 犀牛前端部落首页
  2. Sass教程
  3. Sass基础

Sass环境安装

上篇文章 我们了解了Sass和Sass转换器,这篇文章俺跟大家将一起学习Sass环境安装

Sass转换器使用了Ruby,默认情况下windows并不会安装,所以接下来我们需要先一起安装Ruby。

安装Ruby

要安装Ruby,请从rubyinstaller.org下载并运行适用于Windows的最新稳定版Ruby安装程序。 正确安装完成之后,你可以在窗口栏找到Ruby文件夹,然后点击”使用Ruby启动命令窗口”。

Sass环境安装

安装Sass

在Windows上,使用“使用Ruby启动命令窗口”快捷方式。 在Mac上,使用终端程序。

打开命令窗口后,执行以下命令:

gem install sass

在Windows上,您可能会收到是否确认。输入确认

linux或mac可能会有权限错误提示,如果发生错误信息提示情况,请尝试使用此命令:

sudo gem install sass

测试Sass

输入以下命令确保Sass正确安装:

sass -v

如果显示Sass的版本号,那么就是正确安装了。

接下来我们尝试转换一个Sass文件,创建一个test.sass文件(.sass是Sass文件的后缀名)

输入以下代码,然后保存文件:

$primary : #434433;

html {
  text-color: $primary;
}

在命令行窗口,输入以下命令:

sass test.scss test.css

Sass将会帮我们创建一个test.css文件,如果一切正常,你将会看到一个以下内容的test.css文件。

html {
  text-color: #434433; 
}

到这一步,非常恭喜你!你已经完成了将一段Sass代码转换为CSS代码。

监听Sass文件或文件夹

你可以使用刚刚我们使用的命令来转换一个Sass文件:

sass <input-file> <output-file>

一般情况下我们会将Sass和一些自动化工具整合到一起,例如Grunt或Gulp。

如果你没有使用任何自动化工具,你也可以使用-watch参数来告诉转换器监听单个文件或文件夹:

sass --watch input:output

请注意,此语法略有不同:输入和输出值由冒号而不是空格分隔。 因此,例如,如果想要test.scss每次更改时让转换器重新创建test.css,你将输入以下命令:

sass --watch test.scss:test.css

当然你也可以监听多个,使用如下代码来监听整个文件夹:

sass --watch project/sass:project/stylesheets

其中project / sass当然是你在开发过程中放置Sass文件的位置,而project/stylesheets就是放置CSS文件进行部署的位置。

如果你想了解转换器更多内容,你可以输入sass –help来查看

 

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/2283.html

发表评论

登录后才能评论