less开发指南
来源:互联网 发布:关于网络拍卖司法解释 编辑:程序博客网 时间:2024/06/06 08:25
【一】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等等。
一、考拉编译软件
打开此软件,将.less文件拖进去,而你只需要在编辑器中保存less文件(考拉支持实时监控编译),考拉默认就在该目录生成一份同名的css文件(你可以配置输出路径)
【三】如何在编辑器中,写less有代码补全提示
以 sublime text编辑器 为例子:需要安装
重启后:
【四】版本
Less 的版本,并不是指本身(如jQuery就是需要下载对应的本身版本库),而是指编译工具中的less版本,以考拉软件为例子:
如图所示,就是考拉软件中的less版本,1.6.1
二、Webstorm
事先需要安装gulp,详细教程见http://www.ydcss.com/archives/18。
使用webstorm可视化运行gulp任务;
使用方法:将项目导入webstorm,右键gulpfile.js 选择”Show Gulp Tasks”打开Gulp窗口,若出现”No task found”,选择右键”Reload tasks”,双击运行即可。
- less开发指南
- LESS用法指南
- 使用less开发css
- 二一、node,less安装指南
- 前端开发入门:less入门
- 前端开发工具less入门
- less
- less
- LESS
- less
- less
- less
- less
- less
- LESS
- less
- less
- less
- Hdu1050 Moving Tables
- Java 使用jacob ppt文件转pptx,doc转docx;word 转html、pdf等
- 搜索中台工具分享 - 来自google的经验分享
- Objective-c 学习笔记(三)
- VCS版本控制工具svn和git的小结
- less开发指南
- Android4.4-Launcher源码分析系列之Launcher介绍
- 苹果最刁钻的33个面试题,有种就来挑战
- java对字符串操作大全
- [UnityUI]UGUI按钮长按效果
- Eclipse 常用快捷键
- android开发过程一(intent_button)
- 多线程技术(二)
- VMware Tools installation cannot be started manually while Easy Install is in progress.