LESS :一种动态样式语言。

LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。

在介绍如何通过 lessc (less源码编译器)把编写好的.less文件生成.css文件之前,非常有必要了解一下Node.JS。

一、初识Node.js

Node.js不是JS应用、而是JS运行平台,负责执行服务器端的Javascript代码。事实上,Node.js采用C++语言编写而成,是一个Javascript的运行环境。
Node.js采用了Google Chrome浏览器的V8引擎,性能很好,同时还提供了很多系统级的API,如文件操作、网络编程等。

要想了解更多Node.JS,请参考《深入浅出Node.js》前两篇文章即可

1).深入浅出Node.js(一):什么是Node.js

2).深入浅出Node.js(二):Node.js&NPM的安装与配置(PS:安装最新版本的Node.JS已默认自带了NPM,无需通过GitHub去安装)

我本机的Node.JS默认安装在D:\nodejs\目录下,如图

启动node.js,查看版本

二、安装LESS包

通过npm install -d less命令安装LESS包。

为了将less包安装在nodejs的node_modules目录下,可以先进入d:盘,然后使用该命令

LESS包安装完成后,进入D:\nodejs\node_modules\,该目录下有三个目录,分别为less,npm和.bin(该目录下有lessc编译器),把D:\nodejs\node_modules\.bin添加到环境变量中。

三、编写.less文件并编译它

关于LESS语言的语法本文不做介绍,请参考 http://www.bootcss.com/p/lesscss/

这是一个简单的测试代码test.less,内容如下

@color: #4D926F;

#header {
color: @color;
}
h2 {
color: @color;
}

该文件位于 E:\Code\VS2013\BootstrapDemo\LessDemo\Less\test.less。

启动node.js控制台,进入test.less文件所在的目录,输入lessc test.less > test.css命令,less文件就会被编译成css文件

打开生成的test.css 文件

如何使用lessc编译.less文件的更多相关文章

  1. 本地或者是koala软件编译less文件为css

    背景: 事情的起因是这般的,平时工作是在线上办公,样式是使用less来写,于是乎,这样我从线上download下来的less文件无法直接在自己的本地环境运行.有一个问题就是我要把less文件先编译成c ...

  2. Bootstrap 样式定制-lessc编译源码

    1.github上下载源码:解压:如目录bootstrap 2.新建同级目录custom-bootstrap ,在该目录下新建 如下三个文件:其实就是bootstrap下面的bootstrap.les ...

  3. 利用nodeJs来安装less以及编译less文件为css文件

    NodeJs 使用nodejs安装less以及编译less文件为css文件 首先下载nodeJs的安装包,按照步骤,安装nodejs. 链接:http://pan.baidu.com/s/1dEsqY ...

  4. node.js编译less文件

    大多数文章对于到底怎样编译less文件并没有一个详细的说明,清一色的grunt命令,看得也是晕晕的,所以也就有了这篇手记的存在. 步入正题 1.安装配置好sublime text3(包括各种实用插件) ...

  5. Idea在src下不能编译XML文件

    IDEA编译XML文件,如果需要在src下编译就需要在maven配置中加如下配置: <build> <finalName>SpringDemo</finalName> ...

  6. Eclipse不自动编译java文件的终极解决方案

    最近我的eclipse经常犯傻,项目中总是有很多,启动项目也是没有启动类.查了下项目中生成的class文件,我靠竟然没有,或者还是以前的.原来是eclipse犯傻了,它没帮我自动编译java文件.一般 ...

  7. Protobuf - 使用scons编译proto文件

    使用protobuf过程中,需要先对消息结构进行定义,文件以.proto格式结尾.然后要使用google提供的protoc命令行,把.proto文件转成对应的代码文件. protoc --proto_ ...

  8. 一键编译go文件命令.bat

    一键编译go文件命令.bat    , 请新建 一键编译go文件命令.bat    文件,放到你的xxx.go文件目录下 ( 欢迎加入go语言群: 218160862 , 群内有实践) 点击加入 @e ...

  9. VS2010遇到fatal error C1083: 无法打开预编译头文件:“xxx.pch”: No such file or directory

    对C++和VS2010非常不熟悉,但是无奈赶着项目,只能看了点基础就上手,然后就碰到这个问题了. 原因分析: http://bbs.csdn.net/topics/340191697?page=1 编 ...

随机推荐

  1. AppScan8.0简单扫描

    上篇文章介绍了如何在WindowsXP中安装AppScan8.0,接着本篇就来说说怎么进行一次简单的扫描吧. AppScan8.0开始扫描 1.新建扫描,选择“常规扫描”,如下图: (常规.快速.综合 ...

  2. Facebook或成云领域黑马 冲击亚马逊

    [摘要]目前,云计算领域最大的服务是亚马逊AWS,据称此服务年度营收约为100亿美元. 转播到腾讯微博 BI中文站 3月22日报道 如今,多数人认为亚马逊在云计算领域的发展势头无人可档,不过,这个市场 ...

  3. android机型排行榜(201509)

    http://forum.techweb.com.cn/thread-1352272-1-1.html

  4. Android 手势识别类 ( 三 ) GestureDetector 源码浅析

    前言:上 篇介绍了提供手势绘制的视图平台GestureOverlayView,但是在视图平台上绘制出的手势,是需要存储以及在必要的利用时加载取出手势.所 以,用户绘制出的一个完整的手势是需要一定的代码 ...

  5. html的解析

    Web页面运行在各种各样的浏览器当中,浏览器载入.渲染页面的速度直接影响着用户体验 简单地说,页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程.先来大致了解一下浏览器都 ...

  6. 编写高效的CSS选择符(节选)

    最右边优先 css选择符是从右向左进行匹配的. 样式系统从最右边的选择符开始向左匹配规则.只要当前的选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和匹配的元素,或者因为不匹配而退出. ...

  7. MATLAB对于文本文件(txt)数据读取的技巧总结(经典中的经典)

    振动论坛原版主eight的经典贴http://www.chinavib.com/thread-45622-1-1.html MATLAB对于文本文件(txt)进行数据读取的技巧总结(经典中的经典)由于 ...

  8. [CareerCup] 4.2 Route between Two Nodes in Directed Graph 有向图中两点的路径

    4.2 Given a directed graph, design an algorithm to find out whether there is a route between two nod ...

  9. 20135220谈愈敏Linux Book_18

    第18章 调试 调试内核艰难且风险高,关键在于对内核的深刻理解. 18.1 准备开始 需要的是: 一个bug 一个藏匿bug的内核版本 相关内核代码的知识和运气 内核中的bug不是很清晰,调试成功的关 ...

  10. UIButton利用分类扩展方法(封装)

    UIButton+BackgroundColor.h #import <UIKit/UIKit.h> @interface UIButton (BackgroundColor) - (vo ...