Less的使用
一、less的安装方式：客户端和服务器安装
- 客户端安装：
我们可以直接在客户端使用“.less”（LESS源文件），只需要在官网载一个Javascript脚本文件主“less.js”，然后在我们需要引入LESS源文件的HTML的<head>中加入如下代码：
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="文件夹/less.min.js" ></script>
️这样的方式会报跨域错误，因为浏览器端使用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 进行开发，那么是不是直接通过“<link>”引用“.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
