less的LESS 原理及使用方式

2023-03-04 11:45:02html-css07

less的LESS 原理及使用方式,第1张

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。我们可以直接在客户端使用 .less（LESS 源文件），只需要从http://lesscss.org下载 less.js 文件，然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码：

LESS 源文件的引入方式与标准 CSS 文件引入方式一样：

需要注意的是：在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS 源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。 LESS 在服务器端的使用主要是借助于 LESS 的编译器，将 LESS 源文件编译生成最终的 CSS 文件，目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS，安装成功后就可以在 node 环境中对 LESS 源文件进行编译。

在项目开发初期，我们无论采用客户端还是服务器端的用法，我们都需要想办法将我们要用到的 CSS 或 LESS 文件引入到我们的 HTML 页面或是桥接文件中，LESS 提供了一个我们很熟悉的功能— Importing。我们可以通过这个关键字引入我们需要的 .less 或 .css 文件。如：

@import “variables.less”

.less 文件也可以省略后缀名，像这样：

@import “variables”

引入 CSS 同 LESS 文件一样，只是 .css 后缀名不能省略。 LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。

我们可以从下面的代码了解变量的使用及作用：

清单 3 LESS 文件 @border-color : #b5bcc7 .mythemes tableBorder{ border : 1px solid @border-color }

经过编译生成的 CSS 文件如下：

清单 4. CSS 文件 .mythemes tableBorder { border: 1px solid #b5bcc7 }

从上面的代码中我们可以看出，变量是 VALUE（值）级别的复用，可以将相同的值定义成变量统一管理起来。

该特性适用于定义主题，我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义，这样不同的主题只需要定义不同的变量文件就可以了。当然该特性也同样适用于 CSS RESET（重置样式表），在 Web 开发中，我们往往需要屏蔽浏览器默认的样式行为而需要重新定义样式表来覆盖浏览器的默认行为，这里可以使用 LESS 的变量特性，这样就可以在不同的项目间重用样式表，我们仅需要在不同的项目样式表中，根据需求重新给变量赋值即可。

LESS 中的变量和其他编程语言一样，可以实现值的复用，同样它也有生命周期，也就是 Scope（变量范围，开发人员惯称之为作用域），简单的讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释 Scope。

清单 5. LESS 文件 @width : 20px #homeDiv { @width : 30px #centerDiv{ width : @width// 此处应该取最近定义的变量 width 的值 30px} } #leftDiv {width : @width// 此处应该取最上面定义的变量 width 的值 20px }

经过编译生成的 CSS 文件如下：

清单 6. CSS 文件 #homeDiv #centerDiv { width: 30px } #leftDiv { width: 20px } Mixins（混入）功能对用开发者来说并不陌生，很多动态语言都支持 Mixins（混入）特性，它是多重继承的一种实现，在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。

我们先简单看一下 Mixins 在 LESS 中的使用：

清单 7. LESS 文件// 定义一个样式选择器 .roundedCorners(@radius:5px) { -moz-border-radius: @radius -webkit-border-radius: @radius border-radius: @radius } // 在另外的样式选择器中使用 #header { .roundedCorners } #footer { .roundedCorners(10px) }

经过编译生成的 CSS 文件如下：

清单 8. CSS 文件 #header { -moz-border-radius:5px -webkit-border-radius:5px border-radius:5px } #footer { -moz-border-radius:10px -webkit-border-radius:10px border-radius:10px }

从上面的代码我们可以看出：Mixins 其实是一种嵌套，它允许将一个类嵌入到另外一个类中使用，被嵌入的类也可以称作变量，简单的讲，Mixins 其实是规则级别的复用。

Mixins 还有一种形式叫做 Parametric Mixins（混入参数），LESS 也支持这一特性：

清单 9. LESS 文件// 定义一个样式选择器 .borderRadius(@radius){ -moz-border-radius: @radius -webkit-border-radius: @radius border-radius: @radius } // 使用已定义的样式选择器 #header { .borderRadius(10px)// 把 10px 作为参数传递给样式选择器 } .btn { .borderRadius(3px)// // 把 3px 作为参数传递给样式选择器 }

经过编译生成的 CSS 文件如下：

清单 10. CSS 文件 #header { -moz-border-radius: 10px -webkit-border-radius: 10px border-radius: 10px } .btn { -moz-border-radius: 3px -webkit-border-radius: 3px border-radius: 3px }

我们还可以给 Mixins 的参数定义一人默认值，如

清单 11. LESS 文件.borderRadius(@radius:5px){ -moz-border-radius: @radius -webkit-border-radius: @radius border-radius: @radius } .btn { .borderRadius }

经过编译生成的 CSS 文件如下：

清单 12. CSS 文件 .btn { -moz-border-radius: 5px -webkit-border-radius: 5px border-radius: 5px }

像 JavaScript 中arguments一样，Mixins 也有这样一个变量：@arguments。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。

清单 13. LESS 文件 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ -moz-box-shadow: @arguments -webkit-box-shadow: @arguments box-shadow: @arguments } #header { .boxShadow(2px,2px,3px,#f36) }

经过编译生成的 CSS 文件如下：

清单 14. CSS 文件 #header { -moz-box-shadow: 2px 2px 3px #FF36 -webkit-box-shadow: 2px 2px 3px #FF36 box-shadow: 2px 2px 3px #FF36 }

Mixins 是 LESS 中很重要的特性之一，我们这里也写了很多例子，看到这些例子你是否会有这样的疑问：当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？如果你是 java 程序员或 C++ 程序员，我猜你肯定会想到命名空间 Namespaces，LESS 也采用了命名空间的方法来避免重名问题，于是乎 LESS 在 mixins 的基础上扩展了一下，看下面这样一段代码：

清单 15. LESS 文件 #mynamespace { .home {...} .user {...} }

这样我们就定义了一个名为 mynamespace 的命名空间，如果我们要复用 user 这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace >.user。在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写：

清单 16. HTML 片段 <div id=home> <div id=top>top</div> <div id=center> <div id=left>left</div> <div id=right>right</div> </div> </div>清单 17. LESS 文件 #home{ color : blue width : 600px height : 500px border:outset #top{ border:outsetwidth : 90% } #center{ border:outsetheight : 300pxwidth : 90%#left{ border:outset float : left width : 40%} #right{ border:outset float : left width : 40%} } }

经过编译生成的 CSS 文件如下：

清单 18. CSS 文件 #home { color: blue width: 600px height: 500px border: outset } #home #top { border: outset width: 90% } #home #center { border: outset height: 300px width: 90% } #home #center #left { border: outset float: left width: 40% } #home #center #right { border: outset float: left width: 40% }

从上面的代码中我们可以看出，LESS 的嵌套规则的写法是 HTML 中的 DOM 结构相对应的，这样使我们的样式表书写更加简洁和更好的可读性。同时，嵌套规则使得对伪元素的操作更为方便。

清单 19. LESS 文件a { color: red text-decoration: none &:hover {// 有 &时解析的是同一个元素或此元素的伪类，没有 &解析是后代元素 color: black text-decoration: underline } }

经过编译生成的 CSS 文件如下：

清单 20. CSS 文件 a { color: red text-decoration: none } a:hover { color: black text-decoration: underline } 在我们的 CSS 中充斥着大量的数值型的 value，比如 color、padding、margin 等，这些数值之间在某些情况下是有着一定关系的，那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢？我们来看这段代码：

清单 21 . LESS 文件 @init: #111111 @transition: @init*2 .switchColor { color: @transition }

经过编译生成的 CSS 文件如下：

清单 22. CSS 文件 .switchColor { color: #222222 }

上面的例子中使用 LESS 的 operation 是特性，其实简单的讲，就是对数值型的 value（数字、颜色、变量等）进行加减乘除四则运算。同时 LESS 还有一个专门针对 color 的操作提供一组函数。

使用这些函数和 JavaScript 中使用函数一样。

清单 23 LESS 文件init: #f04615 #body { background-color: fadein(@init, 10%) }

经过编译生成的 CSS 文件如下：

清单 24. CSS 文件 #body { background-color: #f04615 }

从上面的例子我们可以发现，这组函数像极了 JavaScript 中的函数，它可以被调用和传递参数。这些函数的主要作用是提供颜色变换的功能，先把颜色转换成 HSL 色，然后在此基础上进行操作，LESS 还提供了获取颜色值的方法，在这里就不举例说明了。

LESS 提供的运算及函数特性适用于实现页面组件特性，比如组件切换时的渐入渐出。同类框架还有 SASS :与 LESS 相比，两者都属于 CSS 预处理器，功能上大同小异，都是使用类似程序式语言的方式书写 CSS, 都具有变量、混入、嵌套、继承等特性，最终目的都是方便 CSS 的书写及维护。

LESS 和 SASS 互相促进互相影响，相比之下 LESS 更接近 CSS 语法。

在使用CSS的时候,总会有这个想法

这个属性值老是重复写好烦

这个属性值我在前面那个CSS文件中写过,好想直接拿过来用

CSS能不能像其他程序性语言一样用一个变量来代替需要重复利用的内容呢

鉴于以上的想法并非我一人会想到,只要是做过前端的肯定都会思考过这个问题,无奈CSS基本可以说没有语法可依循,于是LESS框架应运而生

什么是LESS

作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念

它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。

LESS的原理

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

环境配置

以webStorm为例,在开始使用LESS之前你必须要安装以下环境

node.js

node.js命令行输入“npm install -g less”安装less；

打开webstorm，File→Settings→Tools→File Watchers,点击右侧绿色“+”号

这里写图片描述

当然还有一种办法使用LESS就是直接使用HBuilder编辑器,自带LESS插件

开始使用

本例以HBuilder编写,在我们写LESS文件的时候会自动帮我们生成CSS文件

这里写图片描述

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<span>This is index</span>

</div>

</body>

</html>

我们的CSS文件会自动生成,不用做任何修改,我们只需要修改我们的LESS文件即可

这里写图片描述

@index-color:red

.index-home{

box-sizing: content-box

background-color: @index-color

}

写完之后我们去看一下index.css生成的代码

这里写图片描述

是的背景色变成了红色,我们看一下运行效果

这里写图片描述

是的,就是这么好使,如果你以为本文结束了,那就错了,这只能满足当前页面引用当前LESS文件中的变量,如何引用其他变量呢?

LESS文件中是可以引用其他LESS文件的,玩过Java的都知道,引用一个类会用到什么关键字,没错,import,大家准备上车!!!!

现在我想在index.less文件中去引用一个基类LESS文件,该如何书写呢

首先写base-less.less

这里写图片描述

@base-font-color:white

在base-less文件中写一个base-font-color:white来控制文本颜色为白色

在index.less中引用,如下

这里写图片描述

很简单明了,引用结束我们看一下效果是怎么样的

这里写图片描述

看到这里,有人会问,能不能直接引用LESS文件啊?

当然可以啊

我们可以直接在客户端使用 .less（LESS 源文件），只需要从 http://lesscss.org下载 less.js 文件，然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码：

LESS 源文件的引入方式与标准 CSS 文件引入方式一样：

其实LESS是有自己的生命周期的,哦,不好意思,是作用域…

简单的讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。

简单明了,代码示例:

@width : 20px

.index{

@width : 30px

.centerDiv{

width : @width// 此处应该取最近定义的变量 width 的值 30px

}

.leftDiv {

width : @width// 此处应该取最上面定义的变量 width 的值 20px

}

最后,最后也是LESS最厉害的作用之一了,你可以把LESS当成JS来玩

@import "base-less.less"

@index-color: red

.index-home {

box-sizing: content-box

background-color: @index-color

color: @base-font-color

.marginTop(100px)

}

.marginTop(@distance) {

margin-top: @distance

}

这里写图片描述

可以直接调用”函数”来完成一些属性的赋值,看下效果如何

安装Less2Css时，需要先安装Package Control。

查看是否安装Package Control :可以点击菜单 Prefrences ，看下是否有Package Control子菜单，或者快捷键（Ctrl+Shift+P）输入Package Control。

如果没有找到，则需要安装.

安装Package Control步骤：1. https://github.com/wbond/sublime_package_control 下载该文件；2.Prefrences >Browser Packages会打开Sublime的安装目录，点击上一层找到Installed Packages文件夹，打开该文件夹，将步骤1中下载的文件解压到改文件夹内。3.重启Sublime。

完成Package Control安装后，可以进行下一步，安装Less2Css

步骤：1.快捷键 Ctrl+Shift+P（菜单 – Tools – Command Paletter），输入 install 选中Install Package并回车，输入或选择Less2Css（注意左下角的小文字变化，会提示安装成功）。

2. https://github.com/duncansmart/less.js-windows 下载该文件并解压到本地目录（eg:D:\less.js-windows-master）；点击计算机右击属性，选择高级系统设置，编辑Path ,将解压目录，添加到PATH中。

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：您的浏览器不支持HTML5 VIDEO

# 下一篇：css怎么在图片上添加文字