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. Vue 内容分发slot

    1.概述 内容分发:混合父组件的内容与子组件自己的模板. 2.单个插槽 当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 DOM 位置,并替换掉插槽标签本身. 最初在  ...

  2. vs 已经加入了引用,编译还是提示没有加入引用

    已经加入了引用,可是.编译还是通只是. 原因:项目总体框架是.Net FramWork4.5,nep中的框架也是4.5.而编译只是的project是4.0. 解决的方法:将编译只是的项目框架改为4.5

  3. p90x 涵盖了全部方式的健身方式美国经典训练DVD

    http://baike.baidu.com/view/2602721.htm  p90x是美国经典训练DVD, 涵盖了全部方式的健身方式13张Beachbody P90X DVD全集,90天魔鬼训练 ...

  4. (五)解决jQuery和其它库的冲突

    在jQuery库中,几乎所有的插件都被限制在它的命名空间里.全局的对象都很好地存储在jQuery命名空间里,因此当把jQuery和其它javascript类库一起使用时,不会引起冲突.(注意:默认情况 ...

  5. 开启Java远程调试

    在JDK启动时,加入 -Xrunjdwp:transport=dt_socket,address=9900,server=y,suspend=n -Dcom.sun.management.jmxrem ...

  6. 整合Kafka到Spark Streaming——代码示例和挑战

    作者Michael G. Noll是瑞士的一位工程师和研究员,效力于Verisign,是Verisign实验室的大规模数据分析基础设施(基础Hadoop)的技术主管.本文,Michael详细的演示了如 ...

  7. PythonCookBook笔记——函数

    函数 可接受任意数量参数的函数 接受任意数量的位置参数,使用*参数. 接受任意数量的关键字参数,使用**参数. 只接受关键字参数的函数 强制关键字参数放在某个参数后或直接单个之后. 给函数参数增加元信 ...

  8. ios 添加全屏返回手势

    1 建立导航控制器 2.导航控制器添加如下代码 - (void)viewDidLoad { [super viewDidLoad]; id target = self.interactivePopGe ...

  9. 20179209课后作业之od命令重写

    一.问题描述: 1 复习c文件处理内容 2 编写myod.c 用myod XXX实现Linux下od -tx -tc XXX的功能 3. main与其他分开,制作静态库和动态库 4. 编写Makefi ...

  10. 超限学习机 (Extreme Learning Machine, ELM) 学习笔记 (一)

    1. ELM 是什么 ELM的个人理解: 单隐层的前馈人工神经网络,特别之处在于训练权值的算法: 在单隐层的前馈神经网络中,输入层到隐藏层的权值根据某种分布随机赋予,当我们有了输入层到隐藏层的权值之后 ...