less开发指南(一)- 小牛试刀
【一】less简介
LESS(是.less后缀名的文件) 包含一套自定义的语法及一个解析器,我们根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性,如变量、继承、运算、嵌套等,更方便CSS的编写和维护。
先看下段less代码片段,感受下它的魅力:
@url:'../images/'; .box-a{
.hd-a{
height: 25px;
background:url('@{url}bg.png');
}
}
编译后的css文件代码:
.box-a .hd-a {
height: 25px;
background: url('../images/bg.png');
}
在上面的less代码中,我们看到了css语法的缩影(选择器,属性的写法),LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。我们在前端页面开发时依然引入css文件地址,而less文件则是你维护的代码文件,这过程中,我们只是多了一个步骤 -- 编译
【二】编译方案
目前将less编译为css的插件或软件很多,如gruntjs ,nodejs等等,而这里介绍的是考拉编译软件,下载地址 http://www.lesscss.net/
打开此软件,将.less文件拖进去,而你只需要在编辑器中保存less文件(考拉支持实时监控编译),考拉默认就在该目录生成一份同名的css文件(你可以配置输出路径)
【三】如何在编辑器中,写less有代码补全提示
以 sublime text编辑器 为例子:需要安装
重启后:
【四】版本
Less 的版本,并不是指本身(如jQuery就是需要下载对应的本身版本库),而是指编译工具中的less版本,以考拉软件为例子:
如图所示,就是考拉软件中的less版本,1.6.1
下一章是 less 的基本语法,敬请期待!
less开发指南(一)- 小牛试刀的更多相关文章
- 《iOS开发指南》正式出版-源码-样章-目录,欢迎大家提出宝贵意见
智捷iOS课堂-关东升老师最新作品:<iOS开发指南-从0基础到AppStore上线>正式出版了 iOS架构设计.iOS性能优化.iOS测试驱动.iOS调试.iOS团队协作版本控制.... ...
- Django web 开发指南 no such table:
在学习django web开发指南时,发布新博客点击save后会有error提示:no such table balabalabala... 百度了一下说重新运行manage.py syncdb 就可 ...
- Boost程序库完全开发指南——深入C++“准”标准库(第3版)
内容简介 · · · · · · Boost 是一个功能强大.构造精巧.跨平台.开源并且完全免费的C++程序库,有着“C++‘准’标准库”的美誉. Boost 由C++标准委员会部分成员所设立的Bo ...
- HelloX项目github协同开发指南
概述 为了提高协同开发效率,HelloX项目已托管到github网站上.根据目前的开发进展,创建了下列几个子项目: HelloX操作系统内核项目:https://github.com/hellox-p ...
- [翻译]现代java开发指南 第二部分
现代java开发指南 第二部分 第二部分:部署.监控 & 管理,性能分析和基准测试 第一部分,第二部分 =================== 欢迎来到现代 Java 开发指南第二部分.在第一 ...
- [翻译]现代java开发指南 第一部分
现代java开发指南 第一部分 第一部分:Java已不是你父亲那一代的样子 第一部分,第二部分 =================== 与历史上任何其他的语言相比,这里要排除c语言和cobol语言,现 ...
- 开发指南专题六:JEECG微云高速开发平台代码生成
开发指南专题六:JEECG微云高速开发平台代码生 1.1. 代码生成扫描路径配置 用代码生成器生成代码后.须要进行相关配置配置,扫描注入control.service.entity等; 具体操作过程例 ...
- 开发指南专题五:JEECG微云高速开发平台代码生成器
开发指南专题五:JEECG微云高速开发平台代码生成器 1.1. Maven开发环境搭建 在搭建jeecg的maven开发环境之前,须要先配置好本机的maven环境,并在eclipse中安装好m2ecl ...
- 开发指南专题十四:JEECG微云高速开发平台MiniDao 介绍
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zhangdaiscott/article/details/27068645 开发指南专题十四:J ...
随机推荐
- 项目总结之HashMap问题
在项目中我需要用另一个项目的中的方法,在另一个项目中的方法返回值是一个hashmap,返回的不是一个hashMap中存的对象而是Object对象.在一个项目中调用另一个项目中的方式是直接引入另一个项目 ...
- Laravel 文档中的 Service Providers
$this->app->singleton('ReportServices', function () { return new \App\Services\ReportServices( ...
- JavaScript-dom3 json_str dom元素控制 模拟百度搜索
访问关系-封装代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- codeforces 70 D. Professor's task 动态凸包
地址:http://codeforces.com/problemset/problem/70/D 题目: D. Professor's task time limit per test 1 secon ...
- Webpack+React+ES6 最新环境搭建和配置(2017年)
刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...
- PHP秒杀系统全方位设计分析(二)
商品页面开发 静态化展示页面[效率要比动态PHP高很多,PHP程序需要解析等步骤,本身就需要很多流程,整个下来PHP的处理花的时间和资源要多] 商品状态的控制 开始前.进行中.库存不足.结束 数据逻辑 ...
- python之yield
#!/usr/bin/env python# -*- coding:utf-8 -*-# Author:wadeson '''def foo(): print("-------------- ...
- 入手sm961
测速: 发现这个测速软件不同版本测试还不一样 下面是我的intel750的,用最新版本测试软件测的 淘宝买了一个散热片
- [BZOJ]BST again
Description 求有多少棵大小为n的深度为h的二叉树.(树根深度为0:左右子树有别:答案对1000000007取模) Input 第一行一个整数T,表示数据组数. 以下T行,每行2个整数n和h ...
- 记数排序 & 桶排序 & 基数排序
为什么要写这样滴一篇博客捏...因为一个新初一问了一道水题,结果就莫名其妙引起了战斗. 然后突然发现之前理解的桶排序并不是真正的桶排序,所以写一篇来区别下这三个十分相似的排序辣. 老年菜兔的觉醒!!! ...