大话css预编译处理(二)安装使用篇

晶莹的代码 2019-06-30

一、Sass、LESS和Stylus的安装

1.Sass的安装

Sass是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样可以正常使用Sass。只是必须先安装Ruby,然后再安装Sass。首先安装Ruby,如果你使用的是IOS系统,那么你的系统已经安装好了Ruby。如果你使用的是微软的Windows系统,那么安装就有些许的麻烦。不过也不用过于担心,按照下面的步骤就能帮你快速的安装好。
  • 到RubyInstaller官网上下载Ruby安装文件(随意选择一个版本),此处选择的是最新版本Ruby1.9.3-p385:

大话css预编译处理(二)安装使用篇

  • Ruby安装文件下载好后,可以按应用软件安装步骤进行安装Ruby。在安装过程中,个人建议将其安装在C盘下,在安装过程中选择第二个选项,如下图所示:

大话css预编译处理(二)安装使用篇

  • Ruby安装完成后,在开始菜单中找到新安装的Ruby,并启动Ruby的Command控制面板,如下图所示:

大话css预编译处理(二)安装使用篇

  • 在启动的Ruby命令控制面板中输入下面的命令:gem install sass
  • 输入上面命令,回车后就会自动安装Sass:

大话css预编译处理(二)安装使用篇

这样Sass就安装成功了,也就可以使用了。

2.LESS的安装

LESS的安装和Sass安装有所不同,他不需要依赖于Ruby环境,就能直接安装使用。不过LESS安装分为两种:客户端和服务器端安装。

a)客户端安装:

我们可以直接在客户端使用“.less”(LESS源文件),只需要在官网载一个Javascript脚本文件主“less.js”,然后在我们需要引入LESS源文件的HTML的<head>中加入如下代码:

<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less">
<script src="文件路径/less.js" type="text/javascript"></script>

需要注意的是:在引入“.less”文件中,“link”的“rel”属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是:LESS源文件一定要在“less.js”引入之前引入,这样才能保证LESS源文件正确编译解析。

b)服务器端安装

LESS在服务器端的使用主要是借助于LESS的编译器,将LESS源文件编译生成最终的CSS文件,目前常用的方式是利用node的包管理器(npm)安装LESS,安装成功后就可以在Node环境中对LESS文件进行编译。如此一来,LESS在服务器的安装和Sass的安装有点相似,不同之处是他们需依赖的环境不一样,LESS需要的是Node JS环境,而Sass需要的是Ruby环境,为了让大家能更清晰的知道如何在服务器端安装LESS,此处简单的过一下安装过程(本文演示的是在Window7下的安装方法)。

  • 首先到Node Js的官网下载一个适合Windows系统的安装文件,此处下载的是“node-v0.8.20-x86.msi”:

大话css预编译处理(二)安装使用篇

  • 安装文件下载后,按正常应用程序方法一样安装。安装完成后在开始菜单中启用Node js的Command控制面板:

大话css预编译处理(二)安装使用篇

  • 在启动的Node Js的Command控制面板直接输入下面的命令:npm install less

大话css预编译处理(二)安装使用篇

  • 这样就安装完LESS的编译命令,可以在本地正常编译LESS源文件。如果您想下载最新稳定版本的LESS,还可以尝试在Node JS的Command控制面板输入:npm install less@latest

3.Stylus的安装

Stylus的安装和LESS在服务器端的安装很相似,同样依赖于Node JS的环境,也就是说也要先安装Node Js(如果安装Node JS请参考前面的介绍)。唯一不同的是在Node JS的Command控制面板输入的命令不一样:npm install stylus
然后,就会自动下载安装最新的stylus库:

大话css预编译处理(二)安装使用篇

这样就算是安装完Stylus了,也可以正常使用Stylus。

二、Sass、LESS和Stylus转译成CSS

Sass、LESS和Stylus源文件(除了LESS源文件在客户端下运行之外)都不能直接被浏览器直接识别,这样一来,要正常的使用这些源文件,就需要将其源文件转译成浏览器可以识别的CSS样式文件,这也是使用CSS预处理器很关键的一步,如果这一步不知道如何操作,那么意味着写出来的代码不可用。接下来按同样的方式,分别来看看三者之间是如何将其源文件转译成所需要的CSS样式文件。

1.Sass源文件转译成CSS文件

Sass文件就是普通的文本文件,不过其文件后缀名有两种,一种为“.sass”;另一种为“.scss”。我们一般用“.scss”就好,至于这两种文件扩展名的区别在于“.sass”是Sass语言文件的扩展后缀名,而“.scss”是SCSS语言文件的扩展后缀名,至于Sass和SCSS的详细区别这里不做介绍。你可以简单的理解为他们都是CSS预处理器语言,而且两者功能特性都一样,只是书写规则不同而以。
  • 要转译Sass文件的前提是有文件可转,因此先在项目中创建一个Sass文件,此例中将其命名为“style.scss”,并且将其放在对应的项目样式中,如D盘的“www/workspace/Sass/css”目录下。
  • 启动Ruby的Command控制面板,找到需要转译的Sass文件,如此例此文件放置在D盘的“www/workspace/Sass/css”目录下:
    大话css预编译处理(二)安装使用篇
  • 如果仅针对于单文件的转译,需要将“style.scss”转译成“style.css”,只需要在对应的目录下输入下面的命令:sass style.scss style.css
  • 这样原本在D盘的“www/workspace/Sass/css”目录下只有“style.scss”这个文件,现在增加了一个“style.css”文件,而这个CSS文件我们就可以用来调用,他也就是“style.scss”转译出来的样式文件。当然,我们不可能每保存一次这个Sass文件就来执行一回这个转译命令。那么有没有更好的办法实现呢?回答是肯定的,可以通过下面的监听命令实现,这样一来只要Sass文件做了修改,就会自动更新对应的CSS样式文件。
  • 单文件的监听,只需要在刚才的命令控制面板中输入:sass --watch style.scss:style.css
  • 按下回车键(Enter),就会看到下面的提示信息:
    大话css预编译处理(二)安装使用篇
  • 看到上图所示的提示信息就表示监听成功,这样一来,你只要修改了“style.scss”文件,“style.css”文件就会随着更新变化。
  • 对于一个项目而言,不太可能只有一个CSS样式文件,如果有多个Sass文件需要监听时,就很有必要的组织一下。默认情况之下,我喜欢把所有的Sass文件放在“/css/sass”目录中,而生成的CSS文件则直接放在“/css”目录下。现在我们修改一下项目文件目录结构,在“/css”目录中再创建一个“sass”目录,并找刚才创建的“style.scss”文件移至“/css/sass”目录下。此时监听“css/sass”下的所有Sass文件时,可以在命令面板中输入如下格式的命令:sass --watch sassFileDirectory:cssFileDirectory
  • 在本例中,冒号前面的“sassFileDirectory”是指“/css/sass”下的“sass”目录,冒号后面的“cssFileDirectory”是指“css”目录,对应的命令就是:sass --watch css/sass:css
  • 回车后,同样可以得到提示信息:
    大话css预编译处理(二)安装使用篇
  • 除了使用Ruby的Command控制面板转译Sass之外还可以考虑第三方工具,比如说有名的Compass.app和fire.app。

2.LESS文件的转译成CSS文件

LESS文件的转译和Sass文件转译可以说是大同小异,不同之处是LESS在安装的Node JS环境下通过其自己的命令来进行转译。

lessc style.less
上面的命令会将编译的CSS传递给stdout,你可以将它保存到一个文件中:
lessc style.less > style.css
除了上面的命令转译LESS源文件之外,现在还有很多第三方开发的工具,例如koloa,koala是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。具体使用可以参考官网:http://koala-app.com/

大话css预编译处理(二)安装使用篇

3.Stylus源文件转译成CSS文件

  • Stylus具有可执行性,因此Stylus能将自身转换成CSS。Stylus可以读取自“stdin”输出到“stdout”,因此Stylus可以像下面转译源文件:
    stylus –compress <some.styl> some.css
  • Stylus也像Sass一样,同时接受单个文件和整个目录的转译。例如,一个目录名为“css”将在同一个目录编译并输出“.css”文件。
    stylus css
  • 下面的命令将输出到“./public/stylesheets”:
    stylus css –out public/stylesheets
  • 还可以同时转译多个文件:
    stylus one.styl two.styl
  • 如果你的浏览器安装了Firebug,那么可以使用FireStylus扩展。
    stylus –firebug <path>

如果你觉得这篇文章对你有所帮助,那就顺便点个赞吧,点点关注不迷路~

黑芝麻哇,白芝麻发,黑芝麻白芝麻哇发哈!

前端哇发哈

相关推荐