大话css预编译处理（二）安装使用篇

SwordFly 发布于2019-08-30 15:55 / 1681人阅读

摘要：上面的命令会将编译的传递给，你可以将它保存到一个文件中除了上面的命令转译源文件之外，现在还有很多第三方开发的工具，例如是一个前端预处理器语言图形编译工具，支持，帮助开发者更高效地使用它们进行开发。

一、Sass、LESS和Stylus的安装 1.Sass的安装

Sass是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样可以正常使用Sass。只是必须先安装Ruby，然后再安装Sass。首先安装Ruby，如果你使用的是IOS系统，那么你的系统已经安装好了Ruby。如果你使用的是微软的Windows系统，那么安装就有些许的麻烦。不过也不用过于担心，按照下面的步骤就能帮你快速的安装好。

到RubyInstaller官网上下载Ruby安装文件（随意选择一个版本），此处选择的是最新版本Ruby1.9.3-p385：

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

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

在启动的Ruby命令控制面板中输入下面的命令：gem install sass

输入上面命令，回车后就会自动安装Sass：

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

2.LESS的安装

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

a)客户端安装：

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

需要注意的是：在引入“.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”：

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

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

这样就安装完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库：

这样就算是安装完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”目录下：

如果仅针对于单文件的转译，需要将“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）,就会看到下面的提示信息：

看到上图所示的提示信息就表示监听成功，这样一来，你只要修改了“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

回车后，同样可以得到提示信息：

除了使用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/

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

Stylus具有可执行性，因此Stylus能将自身转换成CSS。Stylus可以读取自“stdin”输出到“stdout”，因此Stylus可以像下面转译源文件：
stylus –compress some.css

Stylus也像Sass一样，同时接受单个文件和整个目录的转译。例如，一个目录名为“css”将在同一个目录编译并输出“.css”文件。
stylus css

下面的命令将输出到“./public/stylesheets”：
stylus css –out public/stylesheets

还可以同时转译多个文件：
stylus one.styl two.styl

如果你的浏览器安装了Firebug，那么可以使用FireStylus扩展。
stylus –firebug

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

黑芝麻哇，白芝麻发，黑芝麻白芝麻哇发哈！

前端哇发哈

混合云专线服务预编译阶段模板预编译 webrtc预编译预编译头文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117357.html

大话css预编译处理（一）通读介绍篇

摘要：使用预编译处理的优势使用预处理器，可以提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。一、什么是css预编译处理？ CSS 预编译处理，从字面上理解，就是预先编译处理CSS。它扩展了 CSS 语言，增加了变量、Mixin、函数等编程的特性，使 CSS 更易维护和扩展。...

Backache 2019-08-30 15:55 评论0 收藏0
大话css预编译处理（三）：基础语法篇

摘要：值得庆幸的是，这三款预处理器语言的语法和语法都差不多。在这一节中，我们依次来对比一下这三款预处理器语言各种特性的异同之处，以及使用方法。预处理器语言支持任何变量例如颜色数值文本。一、Sass、LESS和Stylus的语法每一种语言都有自己一定的语法规则，CSS预处理器语言也不例外，在真正使用CSS预处器语言之前还有一个不可缺少的知识点，就是对语法的理解。值得庆幸的是，这三款CSS预...

刘东 2019-08-30 15:55 评论0 收藏0
css预编译--sass基础篇

摘要：变量声明和调用这是的编程元素基础之一。如下在最外层声明的是全局变量，全局范围内可以调用，在中声明的是的局部变量，只在内部内进行调用。生成的如下上面的内容就是的基础篇，进阶篇的话会整理一下函数和方法规则相关的东西。 sass起源和简介 css 其实不是一门编程语言， css 全称 Cascading Style Sheets (层叠样式表)是一种用来表现HTML（标准通用标记语言的一个应...

keithyau 2019-08-29 15:23 评论0 收藏0
CSS预编译器

摘要：安装必须先安装再安装先安装简单使用先安装插件嵌套缩进的代码，它是默认值没有缩进的扩展的代码简洁格式的代码压缩后的代码转官方文档安装设置，这里设置成参考使用教程阮一峰高级用法实例中文官网语言特性布局教程语法篇布局教程实例篇安装 sass 必须先安装ruby,再安装sass gem install sassless 先安装npm npm install -g less 简单使用 less...

genedna 2019-08-30 15:45 评论0 收藏0
服务端预渲染之Nuxt（介绍篇）

摘要：为了解决问题，推出了服务端预渲染，以便提高对优化。应用，到了，单页面应用优秀的用户体验，逐渐成为了主流，页面整体式渲染出来的，称之为客户端渲染。客户端接收数据，然后完成最终渲染。通过对客户端服务端基础框架的抽象组织，主要关注的是应用的渲染。现在前端开发一般都是前后端分离，mvvm和mvc的开发框架，如Angular、React和Vue等，虽然写框架能够使我们快速的完成开发，但是由于前...

Shonim 2019-08-23 16:46 评论0 收藏0