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视频课程


温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

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; }