前端技术分享-码匠 极客编程技术分享

您当前位于:开发工具 ——> 快速开发CSS的利器 - less系列 初识less,less是什么

快速开发CSS的利器 - less系列 初识less,less是什么

2015/04/29 22:10:56 | 作者:HTML5学堂(码匠) | 分类:开发工具 | 关键词:less,快速开发,工具

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

HTML5学堂:前端页面的开发越来越讲求效率。less可以说,很好地提升了开发速度。本系列将先为大家介绍基本的less用法,之后进行less具体知识的讲解。

less是什么?

LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。

如何使用less

使用less的几个基本要求:

1、要求编辑器能够支持less文件的编译

2、要求html文件能够解析less文件

3、less的运行环境

欢迎沟通交流~HTML5学堂

让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>

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端