1-Sass、Less的安装和编译方式

Less的使用

一、less的安装方式：客户端和服务器安装

客户端安装：

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

️这样的方式会报跨域错误，因为浏览器端使用less时是使用ajax来拉取的。

服务器端安装

LESS在服务器端的使用主要是借助于LESS的编译器，将LESS源文件编译生成最终的CSS文件，目前常用的方式是利用node的包管理器（npm）安装LESS，安装成功后就可以在Node环境中对LESS文件进行编译。如此一来，LESS在服务器的安装和Sass的安装有点相似，不同之处是他们需依赖的环境不一样，LESS需要的是Node JS环境，而Sass需要的是Ruby环境。

$ npm install less

二、less编译成css （浏览器端，客户端（koala），服务器端）
Sass、LESS和Stylus源文件（除了LESS源文件在客户端下运行之外）都不能直接被浏览器直接识别，这样一来，要正常的使用这些源文件，就需要将其源文件转译成浏览器可以识别的CSS样式文件，这也是使用CSS预处理器很关键的一步，如果这一步不知道如何操作，那么意味着写出来的代码不可用。

1.服务器端-LESS在安装的Node JS环境下通过其自己的命令来进行转译

$ lessc style.less > style.css

2.客户端-koala使用
第一步：在http://koala-app.com/index-zh.html然后安装即可

第二步：在文件中新建index.html，style.less文件，然后在less文件中写完之后放入到koala中编译，之后在html中引入css文件即可，之后编辑less文件就可以了。

3.当然除了使用上边的方式我们还可以在vscode编辑器中安装easy less插件，也可以自动转译。

sass的使用

一、sass的安装

Sass是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样可以正常使用Sass。只是必须先安装Ruby，然后再安装Sass。不过如果你使用的是IOS系统，那么你的系统已经安装好了Ruby。

sudo gem install sass

二、Sass源文件转译成CSS文件（服务器端和客户端）

Sass文件就是普通的文本文件，不过其文件后缀名有两种，一种为“.sass”；另一种为“.scss”。我们一般用“.scss”就好，至于这两种文件扩展名的区别在于“.sass”是Sass语言文件的扩展后缀名，而“.scss”是SCSS语言文件的扩展后缀名。

区别:Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
常常有人会问，使用 Sass 进行开发，那么是不是直接通过“”引用“.scss”或“.sass”文件呢？
那么这里告诉大家，在项目中还是引用.css文件，Sass 只不过是做为一个预处理工具，提前帮你做事情，只有你需要时候，他才有攻效。

要转译Sass文件的前提是有文件可转，因此先在项目中创建一个Sass文件，此例中将其命名为“style.scss”，并且将其放在对应的项目样式中

1.服务器端

如果仅针对于单文件的转译，需要将“style.scss”转译成“style.css”，只需要在对应的目录下输入下面的命令：

$ sass style.scss style.css

这样原本的文件夹的位置增加了一个“style.css”文件，而这个CSS文件我们就可以用来调用，他也就是“style.scss”转译出来的样式文件。

当然，我们不可能每保存一次这个Sass文件就来执行一回这个转译命令。那么有没有更好的办法实现呢？回答是肯定的，可以通过下面的监听命令实现，这样一来只要Sass文件做了修改，就会自动更新对应的CSS样式文件。

单文件的监听，只需要在刚才的命令控制面板中输入：

$ sass --watch style.scss:style.css

这样一来，你只要修改了“style.scss”文件，“style.css”文件就会随着更新变化。
对于一个项目而言，不太可能只有一个CSS样式文件，如果有多个Sass文件需要监听时，就很有必要的组织一下。默认情况之下，可以把所有的Sass文件放在“/css/sass”目录中，而生成的CSS文件则直接放在“/css”目录下。

多文件监听

$ sass --watch sassFileDirectory:cssFileDirectory

在本例中，冒号前面的“sassFileDirectory”是指“/css/sass”下的“sass”目录，冒号后面的“cssFileDirectory”是指“css”目录，对应的命令就是：

$ sass --watch css/sass:css