Less入门一 概述

Less是一种动态的css样式语言

Less 将 css赋予了动态的语言的特性, 如变量,继承, 运算, 函数。 Less既可以在客户端上运行(支持IE6+, Wwbkit(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就这么简单运行出来了, 你是不是也很有成就感呢

时间: 2024-10-11 15:25:31

Less入门一 概述的相关文章

1.NoSQL入门和概述

入门概述: 1.为什么要用到NoSQL a)  单机MySQL的美好年代,在90年代,一个网站的访问量一般都不大,用单个数据库完全可以轻松应付.在那个时候,更多的都是静态网页,动态交互类型的网站不多. 上述架构下,我们来看看数据存储的瓶颈是什么? 1.数据量的总大小 一个机器放不下时 2.数据的索引(B+ Tree)一个机器的内存放不下时 3.访问量(读写混合)一个实例不能承受  如果满足了上述1 or 3个,进化...... b)  Memcached(缓存)+MySQL+垂直拆分,后来,随着

mybatis第一天——入门与概述

大纲摘要: 1.mybatis的介绍 2.Mybatis的入门 a) 使用jdbc操作数据库存在的问题 b) Mybatis的架构 c) Mybatis的入门程序 3.Dao的开发方法 a) 原始dao的开发方法 b) 动态代理方式 4.SqlMapConfig.xml文件说明 一.mybatis概述 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis .

NoSQL入门和概述

1 入门概述 1.1 互联网背景下大机遇,为什么用NOSQL? 1.1.1 单机MySQL的美好时代 在90年代,一个网站的访问量一般都是不大的,用单个数据库完全可以轻松应付. 在那个时候,更多的是静态网页,动态交互类型的网站不多. 在上述的架构上,我们来看看数据存储的瓶颈是什么? 1)数据量的总大小 一个机器放不小的时候 2)数据的索引(B树) 一个机器的内存放不下的时候 3)访问量(读写混合) 一个数据库不能承受 1.1.2 Memcached(缓存)+MySQL+垂直拆分 后来,随着访问量

Redis学习一:Nosql入门和概述

现在Redis越来越火,为了适应技术的发展,开始学习一下Redis,在学习Redis之前先学习一下Nosql. 第一部分:入门概述 1.1 互联网时代背景下大机遇,为什么用nosql 1.1.1 单机Mysql的美好年代(好几年前) 当时的业务很相对简单,就是JSP--->Action---->Service---->DAO----->数据库,数据库也就是一个实例而已,无论是Mysql还是Oracle.把这五层缩减为三层的话便是:应用层------>DAO层------>

JavaScript面向对象轻松入门之概述(demo by ES5、ES6、TypeScript)

写在前面的话 这是一个JavaScript面向对象系列的文章,本篇文章主要讲概述,介绍面向对象,后面计划还会有5篇文章,讲抽象.封装.继承.多态,最后再来一个综合. 说实话,写JavaScript面向对象的文章实在是太多了,网上一搜一大堆,很多书里面也介绍的很详细.但作者当初在学习面向对象的时候还是非常困难,特别是在习惯了面向过程编程的情况下,不知道大家有没有这个感受. 作者分析了一下其中的原因,恐怕是因为里面涉及的概念太多:原型.原型链.继承.this.constructor.call等等,这

SQL学习入门(一) 概述

从事开发也有一段时间了,期间接触SQL也挺长时间了.许多东西也不是理解的特别深刻,所以写写随笔总结归纳一下. 如有不对的地方,欢迎指正! 一.认识SQL (1) 什么是SQL? 1.SQL 指结构化查询语言 2.SQL 使我们有能力访问数据库 3.SQL 是一种 ANSI 的标准计算机语言 注意:ANSI,美国标准 (2) SQL能做什么? SQL 面向数据库执行查询 SQL 可从数据库取回数据 SQL 可在数据库中插入新的记录 SQL 可更新数据库中的数据 SQL 可从数据库删除记录 SQL

大数据入门第十九天——推荐系统与mahout(一)入门与概述

一.推荐系统概述 为了解决信息过载和用户无明确需求的问题,找到用户感兴趣的物品,才有了个性化推荐系统.其实,解决信息过载的问题,代表性的解决方案是分类目录和搜索引擎,如hao123,电商首页的分类目录以及百度,360搜索等.不过分类目录和搜索引擎只能解决用户主动查找信息的需求,即用户知道自己想要什么,并不能解决用户没用明确需求很随便的问题.经典语录是:你想吃什么,随便!面对这种很随便又得罪不起的用户(女友和上帝),只能通过分析用户的历史行为给用户的兴趣建模,从而主动给用户推荐能够满足他们兴趣和需

从java的开始,java概述,java配置环境变量

一.java开发入门 java 概述   Java划分为三个技术平台:JavaSE(标准版,含Java基础类库),JavaEE(企业版,技术平台),JavaME(小型版,小型产品.嵌入式设备) Java语言的特点 简单 面向对象 安全 Java不支持指针,一切对内存的访问都必须通过对象的实例变量来实现 跨平台 支持多线程 程序中可以有多个任务并发执行 JDK 与 JRE   JDK (Java Development Kit),是Java提供的一套开发环境,,包含Java编译器.JRE(Java

C#中的线程(一)入门

C#中的线程(一)入门 - wota - 博客园 公告 文章系参考转载,英文原文网址请参考:http://www.albahari.com/threading/ 作者 Joseph Albahari,  翻译 Swanky Wu 本系列文章可以算是一本很出色的C#线程手册,思路清晰,要点都有介绍,看了后对C#的线程及同步等有了更深入的理解. 入门 概述与概念 创建和开始使用多线程 线程同步基础 同步要领 锁和线程安全 Interrupt 和 Abort 线程状态 等待句柄 同步环境 使用多线程