Less教程

LESS是什么?

LESS是一个CSS预处理器,能够定制,可管理和可重复使用网站的样式表。 LESS是一个动态的样式表语言,扩展CSS的性能。 LESS也是友好的跨浏览器。

CSS预处理器是一种脚本语言,它扩展了CSS并编译成普通的CSS语法,以便它可以通过Web浏览器读取使用。它提供了像变量,函数,混合类型和操作,使您可以建立动态的CSS功能。

为什么要用Less?

  • LESS支持创建更清洁,CSS更快,更容易,跨浏览器更友好。
  • LESS设计在 JavaScript 和还可创建在实时使用,编译比其他的 CSS 预处理器更快。
  • LESS让你的代码,通过使可读性和易于更换的模块化方式。
  • 更快的维护可以通过使用LESS的变量来实现。

历史

LESS是由亚历克西斯泽利尔(Alexis Sellier)在2009年设计的,LESS是一个开源的项目。LESS 的第一个版本是用Ruby编写的,并在后来的版本,它被 JavaScript 替换。

特点

  • 更清洁,更可读的代码可以写在一个有组织的方式。
  • 可以定义样式并且它可以在整个码被重复使用。
  • LESS 基于javascipt,它是 CSS 的超集。
  • LESS整理出的代码冗余的问题,它一个敏捷的工具。

优势

  • LESS 容易产生跨浏览器的 CSS 。
  • LESS 可以通过使用嵌套写的更清洁以及更好地组织代码。
  • 维护能够更快地通过使用变量来实现。
  • LESS使您能够在您的规则集中轻松地重用整个类。
  • LESS提供使用操作,使得编码速度更快,更节省时间。

劣势

  • 这需要时间,如果是刚开始学习使用 CSS 预处理。
  • 由于模块之间的紧耦合,应采取更多的努力重用和/或测试从属模块。
  • LESS 框架相比老预处理像SASS,其中包括框架压缩,比重和超对称。


猿狮妹
2022-07-25
Less教程 Less 编程课程
热门教程
1 Less教程 LESS是一个CSS预处理器,能够定制,可管理和可重复使用网站的样式表。 LESS是一个动态的样式表语言,扩展CSS的性能。 LESS也是友好的跨浏览器。
2 Less运算符 LESS提供了某些算术运算,例如加(+),减(-),乘(*)和除(/),并且它们可以在任何数字,颜色或变量操作。操作符节省大量的时间,当您使用变量,你会觉得工作是简单数学算
3 Less变量插值 变量插值计算表达式的过程或常量含一个或多个变量,得到输出,其中,变量被替换为它们的相应的值。该变量也可以在其他地方,如选择器名,属性名,网址和@import语句中使用。 下
4 Less嵌套规则 这是一组CSS属性,它允许使用一个类的属性到另一个类,包括类的名称作为其属性。在LESS中,你可以使用class和id选择同样的方式作为CSS样式声明混入。它可以存储多个值,并且无论何
5 Less高级参数和@rest变量 混入采用可变数量的参数可使用... 。可以通过放置...变量名后分配参数变量。 让我们来看看一些简单的格式使用参数如下图所示: .mixin(...) { // it matches arguments from 0-n.mixin() { // it mat
6 Less不输出混合类型 可以创建一个 mixin 并且它可以由简单在括号后,它将消失在输出中。 示例 下面的例子演示了 Less 文件中使用混合类型: htmlhead link rel=”stylesheet” href=”style.css” type=”text/css” / titleLESS Mixi
7 Less作用域 变量的作用域指定可用变量的位置。变量将从本地范围搜查,如果它们不提供,则编译器会从父范围搜索。 示例 下面的例子演示了使用命名空间和访问修饰符在Less文件: htmlhead title
8 Less导入选项reference关键词 @import(reference)用于导入外部文件,但它不会增加导入样式到编译CSS文件。这已发布了 1.5.0 版本。 示例 下面的例子演示了LESS文件中使用reference关键字: htmlhead link rel=”stylesheet” href=”sty
9 Less注释 注释使得代码清晰,使用户能够方便理解。您可以在代码中使用这两种注释:区块样式和内联注释,但是当你编译Less代码,单行注释将不会出现在CSS文件。 示例 下面的例子演示了Les
10 Less作用域及扩展@media 内部媒体声明,扩展应被写入。该扩展只存在于同一个媒体声明中选择器匹配。扩展出现在媒体声明中不匹配存在嵌套的声明选择器。 示例 下面的例子演示了使用范围界定内部媒体扩
  • Copyright © 2021 猿狮院, All rights reserved.