Less入门一概述我的第一个less

来源：互联网发布：淘宝店铺简介在哪里看编辑：程序博客网时间：2024/06/05 05:08

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

less.html代码如下

<!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代码 . . . . .

<style type="text/css" id="less:Bootstrap-less-style">

.header {

color: #ffffff;

}

</style>

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

好啦最简单的less就这么简单运行出来了，你是不是也很有成就感呢，那还等什么呢，赶紧动起来吧

0 0

Less入门一 概述 我的第一个less