注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

【转载】快速开发CSS的利器 - 初识less  

2015-04-23 22:36:49|  分类: CSS框架 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

快速开发CSS的利器 - 初识less

less~前端页面的开发越来越讲求效率。less可以说,很好地提升了开发速度。

本系列将先为大家介绍基本的less用法,之后进行less具体知识的讲解。

如何使用less

使用less的几个基本要求:

  • 1、要求编辑器能够支持less文件的编译
  • 2、要求html文件能够解析less文件
  • 3、less的运行环境

让sublime text支持less文件的编译

打开https://github.com/danro/LESS-sublime将less文件的压缩包下载下来。将文件解压之后,放置于sublime的data中的packages文件夹中。


html文件能够解析less文件的设置

http://lesscss.org下载less.js,并将less.js文件引入html页面中。

注意:

  • 引入 XX.less 文件时,rel属性要设置为“stylesheet/less”
  • less.js 之前引入.less后缀的文件,即less.js最后引入

运行环境

服务器运行(本地运行无效)

基本demo

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>快速开发CSS的利器 - 初识less</title>
  6.     <link type="text/less" rel="stylesheet/less" href="test.less" />
  7.     <script src="less.js"></script>
  8. </head>
  9. <body>
  10.     <div class="con">
  11.         独行冰海
  12.         <p>利利</p>
  13.     </div>
  14. </body>
  15. </html>

结束~!

 

欢迎大家互相学习交流。独行冰海

  评论这张
 
阅读(45)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017