如何使用lessc编译.less文件
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》前两篇文章即可
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文件的更多相关文章
- 本地或者是koala软件编译less文件为css
背景: 事情的起因是这般的,平时工作是在线上办公,样式是使用less来写,于是乎,这样我从线上download下来的less文件无法直接在自己的本地环境运行.有一个问题就是我要把less文件先编译成c ...
- Bootstrap 样式定制-lessc编译源码
1.github上下载源码:解压:如目录bootstrap 2.新建同级目录custom-bootstrap ,在该目录下新建 如下三个文件:其实就是bootstrap下面的bootstrap.les ...
- 利用nodeJs来安装less以及编译less文件为css文件
NodeJs 使用nodejs安装less以及编译less文件为css文件 首先下载nodeJs的安装包,按照步骤,安装nodejs. 链接:http://pan.baidu.com/s/1dEsqY ...
- node.js编译less文件
大多数文章对于到底怎样编译less文件并没有一个详细的说明,清一色的grunt命令,看得也是晕晕的,所以也就有了这篇手记的存在. 步入正题 1.安装配置好sublime text3(包括各种实用插件) ...
- Idea在src下不能编译XML文件
IDEA编译XML文件,如果需要在src下编译就需要在maven配置中加如下配置: <build> <finalName>SpringDemo</finalName> ...
- Eclipse不自动编译java文件的终极解决方案
最近我的eclipse经常犯傻,项目中总是有很多,启动项目也是没有启动类.查了下项目中生成的class文件,我靠竟然没有,或者还是以前的.原来是eclipse犯傻了,它没帮我自动编译java文件.一般 ...
- Protobuf - 使用scons编译proto文件
使用protobuf过程中,需要先对消息结构进行定义,文件以.proto格式结尾.然后要使用google提供的protoc命令行,把.proto文件转成对应的代码文件. protoc --proto_ ...
- 一键编译go文件命令.bat
一键编译go文件命令.bat , 请新建 一键编译go文件命令.bat 文件,放到你的xxx.go文件目录下 ( 欢迎加入go语言群: 218160862 , 群内有实践) 点击加入 @e ...
- VS2010遇到fatal error C1083: 无法打开预编译头文件:“xxx.pch”: No such file or directory
对C++和VS2010非常不熟悉,但是无奈赶着项目,只能看了点基础就上手,然后就碰到这个问题了. 原因分析: http://bbs.csdn.net/topics/340191697?page=1 编 ...
随机推荐
- jquery的children方法和css3选择器配合使用
$(".pid").children("ul:nth-child(2)");//获取拥有pid类元素下的第二个ul元素 $(".pid"). ...
- ArcGis 获取地理、平面坐标系
ESRI.ArcGIS.Geometry.ISpatialReference spatialReference = spati ...
- 复习做UWP时涉及到的几种加密签名相关
本人菜鸟一枚,大学里凭兴趣学了一点WP的皮毛,后来又幸运(或者不幸)的进了一家专注于Windows生态的公司做了一段时间的UWP.在博客园写点自己遇到的东西,作为分享,也作为自己的备忘,如果有错误的地 ...
- zabbix架构
监控系统: 数据的采集---存储---展示和分析---报警 snmp cacti:rrd agent nagios:不保存数据,mysql icmp/ssh ...
- 高性能网站性能优化与系统架构(ZT)
转载请保留出处:俊麟 Michael’s blog (http://space.itpub.net/7311285/viewspace-97) 我在CERNET做过拨号接入平台的搭建,而后在Yahoo ...
- 10个鲜为人知的WordPress函数
WordPress功能强大,非常适合开发者使用.说到 WordPress,那么,我们不得不说他的钩子函数.今天,要为大家推荐10个WordPress函数.大多数,都是我们常用的功能,不过,经常不知道如 ...
- [CareerCup] 3.5 Implement Queue using Two Stacks 使用两个栈来实现队列
3.5 Implement a MyQueue class which implements a queue using two stacks. LeetCode上的原题,请参见我之前的博客Imple ...
- RocEDU.阅读.写作《图解TCP/IP》
2015年11月21日 一.对本书的认识 信息通信社会这个词俨然是现代社会的一个名词.人们可以使用各种信息终端随时随地的进行交流,而这种环境正是以来网络才得以实现,使用最为广泛的协议就是TCP/IP协 ...
- 如何下载Hibernate
官网: http://hibernate.org/ 打开hibernate官网,选择Hibernate ORM,点击左侧的Downloads 点击Downloads后,可以看到如下页面,右侧是各个版本 ...
- PCA和LDA降维的比较
PCA 主成分分析方法,LDA 线性判别分析方法,可以认为是有监督的数据降维.下面的代码分别实现了两种降维方式: print(__doc__) import matplotlib.pyplot as ...