使用sublime3 编译less和sass

2017-12-05 本文已影响15人 it筱竹

版权声明：本文为博主原创文章，未经博主允许不得转载。

Sass和Less是一种动态样式语言，属于CSS预处理语言的一种，是CSS 的一种扩展语言它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

一、使用sublime编译less

1、使用less转换css文件

在Sublime中安装插件 less、lessc、Less2Css
安装Node.js，直接 next 操作就行。
网址：https://nodejs.org/en/download/
打开控制台（win + R 输入 cmd ），输入 node -v 验证node是否装好，

在全局中安装 Less 输入npm install less -g （输入 lessc -v 验证Less是否装好）。
输入 npm install -g less-plugin-clean-css 这个是一个插件
在Sublime 中新建less文件，然后按 ctrl + s 保存，自动生成 css文件。

2、引入less文件和less.js文件(常用)

 // 自己写的less文件
 <link rel="stylesheet/less" type="text/less" href="1.less" />
   
   //引入编译less文件的js文件
 <script src="less.min.js" type="text/javascript"></script>

less.js 各版本下载地址：

https://github.com/less/less.js/releases

二、使用sublime编译sass

1、Sass 和 SCSS 有什么区别？

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

（1）. 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名

（2）. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似

2、使用Sass转换css文件

在Sublime中安装插件 scss、sass、sassbuild 插件
SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS
Ruby 网址：http://www.ruby-lang.org/en/downloads/
在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境
打开控制台（win + R 输入 cmd ），输入 Ruby -v 验证Ruby 是否装好
安装Node.js，直接 next 操作就行。
网址：https://nodejs.org/en/download/
打开控制台（win + R 输入 cmd ），输入 node -v 验证node是否装好，
在全局中安装 sass 输入gem install sass （输入 sass -v 验证sass 是否装好）。
在Sublime 中新建scss 文件，然后按 ctrl + S 保存，然后再按 ctrl + B 自动生成 css文件。
注意:在使用sublim编译scss文件时，一定要在非中文路径下进行编译

-------------------------------------------------------over-----------------------------------------------------

作者：蔡国庆（筱竹）