Less 介绍

1 什么是 Less

Less 是一种动态样式语言,属于 CSS 预处理器的范畴,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展

因为 Less 和 CSS 非常像,学习很容易。而且 Less 仅对 CSS 语言增加了少许方便的扩展,这就是 Less 如此易学的原因之一。

Less (Less编辑器 ) 是开源的,其第一个版本由 Ruby 写成,但在后续的版本当中,Ruby 逐渐被替换为 JavaScript。受益于JavaScript,LESS可以在客户端上运行(IE6+、Webkit、Firefox),也可以在服务端运行(Node.js 、Rhino)。

2 Less 编译工具

2.1 less.js

<!doctype html>
<html lang="cn-ZH">
    <head>
        <meta charset="utf-8"></meta>
        <title>LESS</title>
        <!-- 直接在 style 标签内写 less 代码-->
        <style style="text/less">
            ...
        </style>

        <!--也可以单独引入 less 文件-->
        <link rel="stylesheet/less" type="text/css" href="styles.less">

        <!--less.js 可以将上面的 less 编译为 css-->
        <script src="https://cdn.bootcss.com/less.js/3.9.0/less.js"></script>
    </head>
    <body></body>
</html>

2.2 命令行安装 less

此方式需要 node 的支持

安装

npm install less -g

使用

lessc bootstrap.less bootstrap.css

2.3 第三方编译工具 koala(考拉)

koala 官网: http://koala-app.com/index-zh.html

results matching ""

    No results matching ""