现在有很多信息在预处理器上浮动。大部分信息都面向Mac用户,所以在这篇文章中,我提供了一个非常简单的指南,帮助基于Windows的开发人员快速启动并运行Sass(我选择的预处理器)。
本文是在此博客上的CSS Basics类别下提交的,但任何已经在Windows上使用Sass的开发人员也可以添加他们的反馈。
总的来说,即使你在命令行上这样做,Sass也不难设置。但是,如果您没有兴趣完成所有这些步骤,但仍想在Windows上使用Sass,那么,请跳到本文中的最后一个标题,以获取可让您在Windows上以最少的设置开始使用Sass的应用程序列表。
1.安装Ruby
因为Sass是一个Ruby gem,所以你需要做的第一件事是使用Windows安装程序安装Ruby 。与OS X不同,默认情况下不在Windows上安装Ruby,因此Windows用户需要手动安装它。
当您完成安装向导时,您将进入此选项屏幕:
据我所知,你需要检查的唯一选项是中间选项,它可以帮助你的命令行指令识别在哪里找到(如它所说)“Ruby可执行文件”。否则,当您尝试在命令提示符下安装Sass时,您将收到错误消息“ruby未被识别为内部或外部命令”(请参阅下一步)。
如果有人对此设置的特定方面有任何其他相关信息,请注释,我会相应更新。但这对于第一步应该足够了。
2.使用命令提示符安装Sass
现在您已经安装了Ruby,您将能够安装Sass。为此,请通过执行以下操作之一打开命令提示符:
- 单击开始 - >运行,然后键入“cmd”; 要么
- 单击开始 - >所有程序 - >附件,然后选择“命令提示符”
命令提示符打开后,通过在提示符中键入以下内容来安装Sass:
gem install sass
然后点击“输入”,等待安装Sass。完成后应该如下所示:
如果你想获得Compass的额外好处,Compass是一个使用Sass的创作框架,你可以选择做“gem install compass”,它将同时安装Compass和Sass。我不会在这里详细介绍Compass的详细信息,但是一旦你开始使用Sass,你就可以通过谷歌了解一些信息。
3.设置Sass文件
现在已经安装了Ruby和Sass,你想告诉Sass你正在处理什么文件并让它从你的Sass文件中编译你的CSS。
在命令提示符下,使用Sass语法导航到要编写CSS的文件夹。这不是关于命令行语法的教程,所以如果你从未这样做过,你必须自己解决这个问题。您可以查看此链接或只是在谷歌搜索有关简单命令行表达式的教程。
以下是导航到我的文件夹后我的提示的处理方式:
请注意,我已使用“cd”或“change directory”命令导航以找到我正在使用的文件夹。
现在,使用Windows资源管理器,进入该文件夹并创建一个扩展名为“.scss”的新CSS文件。因此,您只需在扩展程序的前面添加“s”,而不是通常的“.css”扩展名。您可以通过创建常规CSS文件和更改扩展名,或创建空白文本文件并将.txt扩展名更改为.scss来完成此操作。
告诉Sass“观察”文件
一旦你的文件存在,你想告诉Sass要注意它的变化,所以它可以用传统的CSS语法将它编译成常规的CSS文件。
在命令提示符下,在.scss文件所在的文件夹内,键入以下内容,然后按Enter键:
sass --watch styles.scss:styles.css
您可以复制上面的代码并将其粘贴到提示中,方法是右键单击并选择“粘贴”(ctrl-V将无法在那里工作)。确保“styles.scss”与您在创建新.scss文件时选择的文件名匹配,并与生成的.css文件相同。不要担心.css文件还不存在; Sass会自动创建它。
一旦使用了如上所示的正确命令,您应该在命令提示符中看到:
如您所见,Sass现在正在“观察”您的.scss文件以进行更改。要停止观看,只需在提示符中按ctrl-C即可。
告诉Sass“观察”文件
一旦你的文件存在,你想告诉Sass要注意它的变化,所以它可以用传统的CSS语法将它编译成常规的CSS文件。
在命令提示符下,在.scss文件所在的文件夹内,键入以下内容,然后按Enter键:
sass --watch styles.scss:styles.css
您可以复制上面的代码并将其粘贴到提示中,方法是右键单击并选择“粘贴”(ctrl-V将无法在那里工作)。确保“styles.scss”与您在创建新.scss文件时选择的文件名匹配,并与生成的.css文件相同。不要担心.css文件还不存在; Sass会自动创建它。
一旦使用了如上所示的正确命令,您应该在命令提示符中看到:
如您所见,Sass现在正在“观察”您的.scss文件以进行更改。要停止观看,只需在提示符中按ctrl-C即可。
写一些Sass并让它编译
使用任何文本编辑器,打开.scss文件并在其中抛出一些Sass。这篇文章不是关于Sass语法(在线有大量的东西,我将来可能会介绍一些东西),但这里有一个你可以复制和粘贴的例子,取自Sass网站(使用“view plain”)链接以获取没有行号的代码的干净副本):
$ blue:#3bbfce ; $ margin:16 px ; .content-navigation { border-color:$ blue ; 颜色:变暗($ blue,9%) ; } .border { padding:$ margin / 2 ; 保证金:$ margin / 2 ; border-color:$ blue ; }
将其粘贴到文本编辑器后,只需保存.scss文件,然后返回命令提示符。您应该看到如下内容:
请注意,Sass已自动检测到对文件的更改,并在同一文件夹中生成了一个新文件。在该文件夹中,您将看到名为“styles.css”的新文件(或任何您命名为.scss文件的文件)。在文本编辑器中打开该新文件以查看已编译的CSS。
使用上面的示例,您应该看到输出显示如下(花括号放置或间距可能略有不同):
.content-navigation { border-color:#3bbfce ; color:#2ca2af ; } .border { padding:8px ; border:8px ; border-color:#3bbfce ; }
现在,您可以继续在.scss文件中编写基于Sass的代码,Sass将在每次保存原始文件时继续检测这些更改并覆盖CSS文件。
当然,请记住,在HTML文件中,当您引用CSS时,您将指向常规的.css文件。.scss文件仅供您编辑,不会直接在任何网页中使用。