当你在写CSS
代码时,面对成百上千的CSS
代码项目,遇到需要改变一些颜色时都需要进行替换操作既费时效率也不高。需要你花费很多的精力去维护CSS
。
非常幸运的是,网站开发社区已经解决了这个问题,现在我们拥有诸如 Less, Sass 和 Stylus 之类的预处理器,它们给我们提供了许多优于纯 CSS
的好处。
- 变量 - 它可以让你更轻松的在整个样式表中定义和更改值(这个功能
CSS
在未来某一天也有可能会实现)。 - 动态计算值 -
CSS
中最近出了一个cal()
, 但它只适合用于长度的计算。 - Mixins - 可以让你重用或者组合样式,而且支持传递参数。
- 函数 - 它为你提供了一些方便的程序去操纵颜色,转换图像等
使用预处理器的唯一缺点就是,你需要将代码转换为纯 CSS
代码,让它能够在浏览器中工作。
1.用Node.js编译(推荐)
在使用less
之前请确保你的主机安装了Node.js
,并且能够正常运行
如果你已经安装了 Node
,那么只需要window
+ R输入cmd
打开命令行工具。安装 less
用以下语句 :
npm install -g less
安装完成后,用命令行切换到你需要转换的目标目录下,在当前目录命令行窗口输入lessc
+ less文件名称和后缀
> css文件名称和后缀(名称自定)
像下面这样:
lessc style.less > style.css
成功后会在当前目录生成一个css
文件,这个就是用Node.js
编译后的css
文件,直接在HTML
中引入即可使用.
2.浏览器使用
在浏览器中使用Less.js是开始开发的最简单方法,而且使用较少的开发也很方便,但是在生产中,当性能和可靠性非常重要时,建议使用Node.js或许多可用的第三方工具之一进行预编译。
第一将你写的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标记在heda
元素中:
<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官网下载 官网要是下载不了用下面这个
百度网盘:koaloa百度网盘下载地址 提取码:2w8r
使用方法很简单,下载安装好后打开koala
软件,会显示当前页面
你只需要把你需要转换的less
文件上一级目录拖进来,并且点击Refresh
按钮就可以实现less
文件的编译