Less入门一 概述

Less是一门动态css语言

Less 将 css赋予了动态的语言的特性, 如变量,继承, 运算, 函数。 Less既可以在客户端上运行(支持IE6+, Webkit(chrome,safari,opera ), firefox), 也可以借助Node.js或者Rhino在服务器端运行


下载less


官网下载 http://www.bootcss.com/p/lesscss/#guide 最新版本2.1.2

从git获取 https://github.com/less/less.js


开始第一个简单的less

创建一个less文件 如命名为style.less的文件

在style.less里面写入最简单的代码

@base: #ffffff;
.header {
    color: @base;
}

分析定义一个base变量,前缀使用@符号

在 class header里面调用base变量

使用style.less

创建一个html文件 命名为less.html

在引入less.js(less.min.js)之前引入style.less 代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
        <link type="text/css" rel="stylesheet/less" href="less/style.less">
        <script type="text/javascript" src="js/less.min.js"></script>
    </head>
    <body>
    </body>
</html>

在chorme里面运行less.html文件 通过F12分析源码会发现在less文件和 less.js文件中间动态生成了一个style内部样式 样式结构如下

. . . . . . 此处省略部分html代码 . . . . .

<link type="text/css" rel="stylesheet/less" href="less/style.less">
<style type="text/css" id="less:Bootstrap-less-style">
    .header {
      color: #ffffff;
    }
</style>
<script type="text/javascript" src="js/less.min.js"></script>

. . . . . . 此处省略部分html代码 . . . . .


好啦最简单的less就这么简单运行出来了, 你是不是也很有成就感呢


本文出自 “ernest” 博客,转载请与作者联系!

你可能感兴趣的:(html,js,css,less)