>> 知识广场

快速开发CSS的利器——less的基本用法

分类：HTML,CSS 作者：myerob 标签：快速 开发 CSS 利器 less 基本 用法 阅读：151 收藏
导读：
less是什么？LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是…

less是什么？

LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

如何使用less

使用less的几个基本要求：

1、要求编辑器能够支持less文件的编译

2、要求html文件能够解析less文件

3、less的运行环境

让sublime text支持less文件的编译

打开https://github.com/danro/LESS-sublime将less文件的压缩包下载下来。将文件解压之后，放置于sublime的data中的packages文件夹中。

html文件能够解析less文件的设置

从http://lesscss.org下载less.js，并将less.js文件引入html页面中。

注意：

引入 XX.less 文件时，rel属性要设置为“stylesheet/less”

less.js 之前引入.less后缀的文件，即less.js最后引入

运行环境

服务器运行（本地运行无效）

基本demo

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            快速开发CSS的利器 - 初识less
        </title>
        <link type="text/less" rel="stylesheet/less" href="test.less" />
        <script src="less.js">
        </script>
    </head>
    
    <body>
        <div class="con">
            三贝计算网
            <p>
                专注计算工具
            </p>
        </div>
    </body>
</html>

相关推荐