方法一:仅介绍在客户端环境下使用的方法

1 新建test.less并引入.less该文件(和css一样在head处引入),注意rel="stylesheet/less"

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

2下载并引入less.js文件,并在head处引入,注意该文件一定要在.less文件后引入;

 <script src="js/less.js"></script>

更多用法参考http://www.bootcss.com/p/lesscss/

方法二:node.js环境并且以Hbuilder作为开发工具下使用

1 安装node.js

2 安装less,npm install -g less;

3打开hbuilder -> 工具 -> 预编译器设置 ->新建,具体步骤如下图顺序

第一步:

第二步:

第三步:注意手动输入文件后缀  .less,并单击智能完成,Hbuilder会自动添加less文件地址

第四步:下过如下,单击确定,已经执行成功

第五步:在html中使用,直接新建一个less文件(index.less),然后在head出引入正常css文件(index.css),会自动编译成.css文件,如下图

第二种方法很简单,借助Hbuilder开发工具,只需要安装node.js,即可实现less的预编译!

css预编译器——Less的使用的更多相关文章

  1. 在 CSS 预编译器之后:PostCSS

    提到css预编译器(css preprocessor),你可能想到Sass.Less以及Stylus.而本文要介绍的PostCSS,正是一个这样的工具:css预编译器可以做到的事,它同样可以做到. “ ...

  2. CSS预编译器

    零.CSS预编译器 CSS预处理器是指对生成CSS前的某一语法的处理.CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,供项目使用 CSS预处理器为CSS增加一 ...

  3. CSS预编译器配置-------LESS Sass Stylus webstorm

    预编译器配置说明 开头语,发挥CSS预处器的作用是一种很有挑战性的事情.CSS预处器有不同的语言,就有不同的语法和功能. 语法 在使用CSS预处器之前最重要的是对语法的理解,幸运的是,这三种CSS预处 ...

  4. CSS预编译器:Sass(入门),更快的前端开发

    SASs是由美国注册会计师协会(AICPA)下属审计准则委员会(ASB)发布,是为了便于注册会计师执行和落实一般公认审计准则(GAAS). Sass 扩展了 CSS3,增加了规则.变量.混入.选择器. ...

  5. CSS预编译器less简单用法

    1.变量 定义变量 @变量名:值; @test_width:100px; 使用变量 .box{ width:@test_width; height:@test_width; background-co ...

  6. CSS预编译器:Sass(进阶),更快的前端开发

    1.@if     @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块 在 Sass 中除了 @if 之,还 ...

  7. stylus(css预编译器)

    推荐去张鑫旭大神这里详细了解:http://www.zhangxinxu.com/jq/stylus/ 安装 npm install -g stylus 自动编译 $ stylus -w demo.s ...

  8. 前端学习笔记系列一:6 一种新的css预编译器stylus

    stylus是 CSS 的预处理框架.CSS 预处理,顾名思义,预先处理 CSS.那 stylus 咋预先处理呢?stylus 给 CSS 添加了可编程的特性,也就是说,在 stylus 中可以使用变 ...

  9. CSS预编译与PostCSS以及Webpack构建CSS综合方案

    CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W ...

随机推荐

  1. JS三角形

    1.直角三角形 <script> ; ; i++) { //外层循环代表的是要循环的行数 ; j < i; j++) { //内层循环代表的是要打印的列数 document.writ ...

  2. LoadRunner结果分析 – TPS

    针对吞吐率和 TPS 的关系,这个在结果分析中如何使用,就个人经验和朋友讨论后,提出如下建议指导,欢迎同僚指正. 相关定义 响应时间 = 网络响应时间 + 应用程序响应时间 响应时间 =(N1+N2+ ...

  3. ZOJ 2314 Reactor Cooling

    Reactor Cooling Time Limit: 5000ms Memory Limit: 32768KB This problem will be judged on ZJU. Origina ...

  4. nyoj 2 括号配对问题水

    #include<stdio.h> #include<stack> #include<string.h> #define N  11000 using namesp ...

  5. BA-siemens-PXC模块调试

    PXC24模块写地址步骤: 1.制作一根HMI线: 2.通过HMI+232转USB转接卡连接模块: 3.根据已经做好的系统架构表来配置模块: 写模块之前不要忘了格式化模块,主要命令如下: 视频教程:h ...

  6. nodejs-EventEmitter

    addListener(event, listener)为指定事件添加一个监听器到监听器数组的尾部. on(event, listener)为指定事件注册一个监听器,接受一个字符串 event 和一个 ...

  7. hdu 4717 The Moving Points(三分)

    http://acm.hdu.edu.cn/showproblem.php?pid=4717 大致题意:给出每一个点的坐标以及每一个点移动的速度和方向. 问在那一时刻点集中最远的距离在全部时刻的最远距 ...

  8. 【C/C++学院】0724-堆栈简单介绍/静态区/内存完毕篇/多线程

    [送给在路上的程序猿] 对于一个开发人员而言,可以胜任系统中随意一个模块的开发是其核心价值的体现. 对于一个架构师而言,掌握各种语言的优势并能够运用到系统中.由此简化系统的开发.是其架构生涯的第一步. ...

  9. 验证DG最大性能模式下使用ARCH/LGWR及STANDBY LOG的不同情况

    总结:  --两台单实例数据库做DG,数据库版本号10.2.0.1.0 1.主库配置为:arch async,备库无STANDBY LOG. 日志中会有:RFS[4]: No standby redo ...

  10. jquery源码ajax分析

    http://www.cnblogs.com/aaronjs/p/3683925.html