• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > less开发指南

less开发指南

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含less开发等相关知识,佚名 希望在学习及工作中可以帮助到您

【一】less简介

LESS(是.less后缀名的文件) 包含一套自定义的语法及一个解析器,我们根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性,如变量、继承、运算、嵌套等,更方便CSS的编写和维护。

先看下段less代码片段,感受下它的魅力: 


@url:'../images/';</p> <p>.box-a{
.hd-a{
height: 25px;
background:url('@{url}bg.png');
}
}

编译后的css文件代码:


 

【二】编译方案

目前将less编译为css的插件或软件很多,如gruntjs ,nodejs等等,而这里介绍的是考拉编译软件

 

打开此软件,将.less文件拖进去,而你只需要在编辑器中保存less文件(考拉支持实时监控编译),考拉默认就在该目录生成一份同名的css文件(你可以配置输出路径)

 

 

【三】如何在编辑器中,写less有代码补全提示

以 sublime text编辑器 为例子:需要安装

重启后:

 

【四】版本

Less 的版本,并不是指本身(如jQuery就是需要下载对应的本身版本库),而是指编译工具中的less版本,以考拉软件为例子:

如图所示,就是考拉软件中的less版本,1.6.1

您可能想查找下面的文章:

相关文章

  • 2017-08-06浮动的ul背景及图片的边框的使用
  • 2017-08-06简单但很实用的5个css属性
  • 2017-08-06让IE支持CSS3的不完全兼容方案
  • 2017-08-06Css3圆角边框制作代码
  • 2017-08-06CSS Expression 优化
  • 2017-08-06英文强制换行css 使用css强制英文单词断行代码
  • 2017-08-06基于css3实现漂亮便签样式
  • 2017-08-06ie6 z-index不起作用的完美解决方法
  • 2017-08-06利用column多列属性调整页面文字列布局
  • 2017-08-06使用CSS3的::selection改变选中文本颜色的方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • css实现适用于团购网站的橙色导航菜单代码
    • 一款CSS3实现多功能下拉菜单(带分享按)的教程
    • 利用纯CSS实现头像旋转和发光的效果
    • CSS border-color 属性使用方法
    • CSS3制作文字半透明倒影效果的两种实现方式
    • IE下textarea默认不显示滚动条的实现代码
    • div中英文无法自动换行的解决办法
    • 纯CSS实现漂亮的下拉导航效果代码
    • css 空白外边距互相叠加的解决方法
    • IE6中DIV使用了relative不定义宽度导致right定位误差

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有