下载APP 编程狮,随时随地学编程
返回 首页

Less 教程

开始阅读
手册说明:

什么是LESS?

LESS是一个CSS预处理器,可以为网站启用可自定义,可管理和可重用的样式表。 LESS是一种动态样式表语言,扩展了CSS的功能。 LESS也是跨浏览器友好。

CSS预处理器是一种脚本语言,可扩展CSS并将其编译为常规CSS语法,以便可以通过Web浏览器读取。 它提供诸如变量,函数, mixins 和操作等功能,可以构建动态CSS。



为什么要使用LESS?

  • LESS支持创建更清洁,跨浏览器友好的CSS更快更容易。
  • LESS是用JavaScript设计的,并且创建在 live 中使用,其编译速度比其他CSS预处理器更快。
  • LESS保持你的代码以模块化的方式,这是非常重要的,通过使其可读性和容易改变。
  • 可以通过使用LESS 变量来实现更快的维护。

历史

LESS由 Alexis Sellier 于2009年设计。LESS是一个开源。 LESS的第一个版本是用Ruby编写的,在后来的版本中,它被JavaScript代替。

特征

  • 更清晰和更可读的代码可以以有组织的方式编写。
  • 我们可以定义样式,它可以在整个代码中重复使用。
  • LESS是基于JavaScript的,是超集的CSS。
  • LESS是一个敏捷工具,可以排除代码冗余的问题。

优点

  • LESS轻松地生成可在浏览器中工作的CSS。
  • LESS使您能够使用嵌套编写更干净,组织良好的代码。
  • 通过使用变量可以更快地实现维护。
  • LESS使您能够通过在规则集中引用它们来轻松地重用整个类。
  • LESS提供使用操作,使得编码更快并节省时间。

缺点

  • 学习如果你是新的CSS预处理需要时间。
  • 由于模块之间的紧密耦合,应当采取更多的努力来重用和/或测试依赖模块。
  • 与旧的预处理器(例如Sass)相比,LESS具有较少的框架,Sass由框架 Compass , Gravity和 Susy 组成。

适用人群

本教程将帮助学生以及希望使他们的网站或个人博客更具吸引力的专业人士。

学习前提

您应该熟悉:

  • 使用任何文本编辑器的基本字处理。
  • 如何创建目录和文件。
  • 如何浏览不同的目录。
  • 使用Internet Explorer或Firefox等流行的浏览器进行Internet浏览。
  • 使用HTML或XHTML开发简单的网页。

如果您是HTML和XHTML的新手,那么我们建议您先阅读HTML教程或XHTML教程。

如果您觉得LESS的学习难度较高,不好理解,可以采用更易于理解的视频教程进行学习:LESS视频课程


目录

Less 基本教程

Less 安装

Less 语言特性

Less 嵌套规则
Less 操作
Less 转义
Less 函数
Less 命名空间和访问器
Less 变量范围
Less 注释
Less 导入
Less 变量
Less 扩展
Less 混合
Less 混合参数
Less Mixins函数
Less 将规则集传递给Mixins
Less 导入指令
Less 导入选项
Less Mixin Guards
Less CSS Guards
Less 循环
Less 合并
Less 父选择器

Less 函数

Less 其他函数
Less 字符串函数
Less 列表函数
Less 数学函数
Less 类型函数
Less 颜色定义函数
Less 颜色通道函数
Less 颜色操作
Less 颜色混合函数

Less 用法

Less 命令行用法
Less 在浏览器中使用
Less 浏览器支持
Less 插件
Less 程序化使用
Less 在线编译器
Less GUIs
Less 编辑器和插件
Less 第三方编译器
Less 框架

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }