less的几种编译成css的方法

时间 2019-11-30

标签几种编译 css 方法栏目 CSS 繁體版

原文原文链接

当你在写CSS代码时，面对成百上千的CSS代码项目，遇到须要改变一些颜色时都须要进行替换操做既费时效率也不高。须要你花费不少的精力去维护CSS。javascript

很是幸运的是，网站开发社区已经解决了这个问题，如今咱们拥有诸如 Less, Sass 和 Stylus 之类的预处理器，它们给咱们提供了许多优于纯 CSS 的好处。css

变量 - 它可让你更轻松的在整个样式表中定义和更改值（这个功能 CSS 在将来某一天也有可能会实现）。
动态计算值 - CSS 中最近出了一个cal()，但它只适合用于长度的计算。
Mixins - 可让你重用或者组合样式，并且支持传递参数。
函数 - 它为你提供了一些方便的程序去操纵颜色，转换图像等

使用预处理器的惟一缺点就是，你须要将代码转换为纯 CSS 代码，让它可以在浏览器中工做。html

1.用Node.js编译(推荐)

在使用less以前请确保你的主机安装了Node.js，而且可以正常运行前端

若是你已经安装了 Node ，那么只须要window + R输入cmd打开命令行工具。安装 less 用如下语句：java

npm install -g less
复制代码

安装完成后，用命令行切换到你须要转换的目标目录下，在当前目录命令行窗口输入lessc + less文件名称和后缀 > css文件名称和后缀(名称自定)像下面这样：git

lessc style.less > style.css
复制代码

成功后会在当前目录生成一个css文件,这个就是用Node.js 编译后的css文件,直接在HTML中引入便可使用.github

2.浏览器使用

在浏览器中使用Less.js是开始开发的最简单方法，并且使用较少的开发也很方便，可是在生产中，当性能和可靠性很是重要时，建议使用Node.js或许多可用的第三方工具之一进行预编译。npm

第一将你写的less样式表.经过link链进HTML而且将rel属性设置为stylesheet/less浏览器

<link rel="stylesheet/less" type="text/css" href="styles.less"/>
<!-- 下面这种写法也行，自行选择 -->
<link rel="stylesheet" type="text/less" href="styles.less"/>
复制代码

接下来下载less.js并将script标记在head元素中:sass

<head>
<link rel="stylesheet" type="text/less" href="styles.less"/>
<script src="less.js" type="text/javascript"></script>
</head>
复制代码

点击less.js下载后在dist文件夹里面就是less.js

3.下载koala软件编译less

koala是款很是实用非图形编译工具。koala能够帮助用户快速进行主流计算机语言编译，而且支持less使用能跨平台操做完美兼容目前全部电脑操做系统，是用户进行前端语言图形编译好帮手。koala这个由国人编写的，用于编译sass、less、coffee利器。在此先感谢koala的做者们，感谢大家给咱们带来这么棒的免费工具。

下载地址:koala-app.com/ 官网要是下载不了用下面这个

百度网盘：pan.baidu.com/s/155uHKO8H…
提取码：2w8r

使用方法很简单,下载安装好后打开koala软件，会显示当前页面

你只须要把你须要转换的 less文件上一级目录拖进来,而且点击 Refresh按钮就能够实现 less文件的编译