1、简介

LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

具体语言特性详见：http://www.bootcss.com/p/lesscss/

2、LESS的安装

less安装分为两种：客户端和服务器端

a、客户端安装

在官网下载一个JavaScript 脚本文件“less.js”，然后在需要引入LESS源文件的html的<head>中加入如下的代码

<link rel="stylesheet/less" type="text/css" href="/styles.less">

<script src="/less.js" type="text/javascript"></script>

这里要注意，在引入“.less”文件时，“link”的“rel”属性要设置为“stylesheet/less”。

还要注意：less源文件一定要在“less.js”引入之前引入，这样才能保证LESS源文件正确编译解析。

b、服务器端安装

利用node的包管理器（npm）安装LESS

1、首先到Node JS的官网下载一个适合Windows 系统的安装文件

2、打开.msi文件，运行

3、检查path环境变量是否配置了Node.js，点击开始=》运行=》输入cmd=》输入命令“path”，输出结果如下

4、启动Node Js的command 控制面板直接输入命令：

$ npm install less

找到你要编译的less文件目录，编译less文件，输入如下命令：

$ lessc color.less > color.css

这时候就在文件夹下生成了 .css文件。

c、除了上面的命令转译LESS源文件之外，还有一个第三方开发的工具，比较常用的是WinLess工具，简单易用

下载地址：http://winless.org/

点击Add folder，添加要编译的less文件目录，右侧加载less文件，如果没有加载好，点击右侧窗口的Refresh，刷新目录结构。

选中要编译的less文件，compile 完成编译，如果less文件有错误，编译会失败报错，成功编译会在文件下生成相应的.css文件。

less的安装使用和入门实践的更多相关文章

  1. sass、less和stylus的安装使用和入门实践

    刚 开始的时候,说实话,我很反感使用css预处理器这种新玩意的,因为其中涉及到了编程的东西,私以为很复杂,而且考虑到项目不是一天能够完成的,也很少是 一个人完成的,对于这种团队的项目开发,前端实践用c ...

  2. Azure DevOps Server 入门实践与安装部署

    一,引言 最近一段时间,公司希望在自己的服务器上安装本地版的 Azure DevOps Service(Azure DevOps Server),用于项目内的测试,学习.本着学习的目的,我也就开始学习 ...

  3. 分布式学习系列【dubbo入门实践】

    分布式学习系列[dubbo入门实践] dubbo架构 组成部分:provider,consumer,registry,monitor: provider,consumer注册,订阅类似于消息队列的注册 ...

  4. Django入门实践（三）

    Django入门实践(三) Django简单应用 前面简单示例说明了views和Template的工作过程,但是Django最核心的是App,涉及到App则会和Model(数据库)打交道.下面举的例子 ...

  5. Django入门实践（一）

    Django入门实践(一) Django编程思路+入门 认识Django有一个多月了,我觉得学习Django应该先理清它的编程思路.它是典型的MVC框架(在Django里也称MTV),我觉得Djang ...

  6. kubernetes入门实践

    k8s中文文档 k8s概念比较多,有什么概念的疑惑的推荐看k8s中文文档. me的环境 操作系统:centos7 docker:1.12.6 环境跟me的不一致?不要慌,基本大部分操作都是行的通的. ...

  7. 全文搜索引擎Elasticsearch入门实践

    全文搜索引擎Elasticsearch入门实践 感谢阮一峰的网络日志全文搜索引擎 Elasticsearch 入门教程 安装 首先需要依赖Java环境.Elasticsearch官网https://w ...

  8. 20165223 Linux安装及命令入门

    预备作业3:Linux安装及命令入门 一.VirtualBox和Ubuntu的安装 通过学习实践基于VirtualBox虚拟机安装Ubuntu图文教程,我开始学习虚拟机的安装,根据教程一步步试着安装. ...

  9. 【实战】Docker入门实践二：Docker服务基本操作 和 测试Hello World

    操作环境 操作系统:CentOS7.2 内存:1GB CPU:2核 Docker服务常用命令 docker服务操作命令如下 service docker start #启动服务 service doc ...

随机推荐

  1. DFRobot万物互联大赛第一轮

    前言 原创文章,转载引用务必注明链接,水平有限,如有疏漏,欢迎指正. DF搞的这个比赛还挺有趣:micro:bit × OBLOQ DF创客社区玩转物联网挑战赛,一边在写文章一边在爱奇艺上看着印度电影 ...

  2. Android 开发程序员必备网站

    开发必备网站: Android 开发各种工具下载 Android 开发国内大牛集合 Android 开发技术博客周刊 Android 开发技术周报中文版 Android 优秀开源项目集合以及源码分析 ...

  3. vuex 中关于 mapMutations 的作用

    mapMutations 工具函数会将 store 中的 commit 方法映射到组件的 methods 中.和 mapActions 的功能几乎一样,我们来直接看它的实现: export funct ...

  4. jmeter之怎样减负-实现稳定超高并发測试（性能调优）

    新浪围脖>@o蜗牛快跑o    在測试过程中,刚開始学习的人(也包含早期的我),使用工具不当,加入众多监控组件,很想看到实时报告.跑不了一会,jmeter就卡死甚至oom.仅仅得重新启动.之前的 ...

  5. canvas图片压缩，局部放大，像素处理

    直接上代码:(具体看注释) 需要引用jquery.min.js <!DOCTYPE html> <html lang="en"> <head> ...

  6. 并发insert情况下数据重复插入问题的解决方案

    背景介绍 通常我们在接口里要保存一条数据时,会先判断该条记录在数据库里是否存在,如果不存在就插入,如果存在就返回已经存在. 就拿常见的工单来举例 Order order = orderService. ...

  7. html用jquery获取屏幕宽度与滚动条的关系

    当内容高度超过屏幕高度时,获取的屏幕宽度不包括滚动条.即使是浮动,也要显式设置高度,才会全屏. 未超过时,获取的宽度包括滚动条.

  8. MySQL联表更新插入数据

    Error: DELETE FROM t_23andme_addref WHERE id IN (  SELECT min(id)  FROM t_23andme_addref   GROUP BY ...

  9. WARN util.NativeCodeLoader: Unable to load native-hadoop l... using builtin-java classes where applicable（附编译脚本）

    WARN util.NativeCodeLoader: Unable to load native-hadoop l... using builtin-java classes where appli ...

  10. 新手学习JSP+Servlet笔记一

    作为一个新手,初次接触jsp,servlet,习惯了后台的开发,前台的知识一窍不通,利用闲暇时间,给自己补补,从MyEclipse开始. 安装好MyEclipse之后,没有安装程序的可以下载 http ...