CN106598616A

CN106598616A - 一种Less库的封装方法及装置

Info

Publication number: CN106598616A
Application number: CN201611191724.4A
Authority: CN
Inventors: 沈文策
Original assignee: Fujian Cnfol Information Technology Co Ltd
Current assignee: Fujian Cnfol Information Technology Co Ltd
Priority date: 2016-12-21
Filing date: 2016-12-21
Publication date: 2017-04-26

Abstract

本发明实施例提供了一种Less库的封装方法及装置，涉及计算机技术领域，所述方法包括：根据待实现目标CSS文件的功能，建立多个Less代码子模块，其中，所述多个Less代码子模块之间存在调用关系，每一个Less代码子模块实现所述目标CSS文件的一个或多个功能；将所述多个Less代码子模块添加至Less文件，生成Less库文件，其中，所述Less库文件用于在编译后生成所述目标CSS文件。与现有技术中的Less库的封装方法相比，本发明实施例的封装完的less库文件，不仅代码体积小、结构清晰，而且易于维护和拓展，适用范围广。

Description

一种Less库的封装方法及装置

技术领域

本发明涉及计算机技术领域，特别是涉及一种Less库的封装方法及装置。

背景技术

随着互联网技术的发展，前端技术发展更新日益加快，尤其是近几年HTML5(HyperText Markup Language 5，第五代超级文本标记语言)技术的发展，使得HTML5在整个互联网世界绽放光彩。在前端技术中，CSS(Cascading Style Sheets，层叠样式表)是前端工作人员工作中不可或缺的一部分，CSS虽然基础但是很重要。然而，在工作中有时候需要编写大量CSS样式表，单纯直接编写CSS不仅耗时耗力而且效果不一定会达到预期效果；这时就需要一种CSS预处理语言，比如Less，在CSS语言的基础上，增加诸如变量、混合、函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，让CSS更易维护。然而，Less的编写过程仍然不够简洁，代码编写的效率不高。

在计算机技术中，库函数是把函数放到库里，供别人使用的一种方式。库函数的使用方法是把一些常用的函数编完放到一个文件里，供不同的人进行调用。但是，现有的Less库少，代码结构复杂，复用性低。

发明内容

本发明实施例的目的在于提供一种Less库的封装方法及装置，以简化Less库的代码结构，提高代码的复用性。具体技术方案如下：

本发明实施例公开了一种Less库的封装方法，包括：

根据待实现目标CSS文件的功能，建立多个Less代码子模块，其中，所述多个Less代码子模块之间存在调用关系，每一个Less代码子模块实现所述目标CSS文件的一个或多个功能；

将所述多个Less代码子模块添加至Less文件，生成Less库文件，其中，所述Less库文件用于在编译后生成所述目标CSS文件。

可选的，所述根据待实现目标CSS文件的功能，建立多个Less代码子模块，包括：

建立公用模块，其中，所述公用模块用于实现所述多个Less代码子模块中的至少两个Less代码子模块中的功能；

调用所述公用模块，生成第一类Less代码子模块，其中，所述第一类Less代码子模块包括至少一个Less代码子模块。

可选的，本发明实施例的Less库的封装方法，还包括：

调用所述公用模块和/或、所述第一类Less代码子模块中的至少一个Less代码子模块，生成第二类Less代码子模块，其中，所述第二类Less代码子模块包括一个或多个Less代码子模块。

可选的，所述将所述多个Less代码子模块添加至Less文件，生成Less库文件的步骤，包括：

通过koala软件和sublime编译器编写所述Less文件；或

通过compass编写所述Less文件；或

通过gulp编写所述Less文件，生成Less库文件。

可选的，所述多个Less代码子模块之间存在参数的传递。

本发明实施例还公开了一种Less库的封装装置，包括：

子模块建立模块，用于根据待实现目标CSS文件的功能，建立多个Less代码子模块，其中，所述多个Less代码子模块之间存在调用关系，每一个Less代码子模块实现所述目标CSS文件的一个或多个功能；

Less库文件生成模块，用于将所述多个Less代码子模块添加至Less文件，生成Less库文件，其中，所述Less库文件用于在编译后生成所述目标CSS文件。

可选的，所述子模块建立模块包括：

公用模块建立单元，用于建立公用模块，其中，所述公用模块用于实现所述多个Less代码子模块中的至少两个Less代码子模块中的功能；

第一类Less代码生成单元，用于调用所述公用模块，生成第一类Less代码子模块，其中，所述第一类Less代码子模块包括至少一个Less代码子模块。

可选的，所述子模块建立模块还包括：

第二类Less代码生成单元，用于调用所述公用模块和/或、所述第一类Less代码子模块中的至少一个Less代码子模块，生成第二类Less代码子模块，其中，所述第二类Less代码子模块包括一个或多个Less代码子模块。

可选的，所述Less库文件生成模块，包括：

第一Less编写单元，用于通过koala软件和sublime编译器编写所述Less文件；或

第二Less编写单元，用于通过compass编写所述Less文件；或

第三Less编写单元，用于通过gulp编写所述Less文件，生成Less库文件。

可选的，所述多个Less代码子模块之间存在参数的传递。

本发明实施例提供的Less库的封装方法及装置，根据待实现目标CSS文件的功能，建立多个Less代码子模块；将所述多个Less代码子模块添加至Less文件，生成Less库文件。通过建立公用模块，调用公用模块，生成第一类Less代码子模块，调用公用模块和/或、第一类Less代码子模块中的至少一个Less代码子模块，生成第二类Less代码子模块，通过Less代码子模块之间的调用关系，使封装完成的Less库文件不仅代码体积小，结构简单，而且易于维护和拓展，适用范围更广。当然，实施本发明的任一产品或方法必不一定需要同时达到以上所述的所有优点。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例的Less库的封装方法的流程图；

图2为本发明实施例的Less库的封装装置的一种结构图；

图3为本发明实施例的Less库的封装装置的另一种结构图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

CSS是一种用来表现HTML或XML(Extensible Markup Language，可扩展标记语言)等文件样式的计算机语言，被广泛应用于万维网。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。然而，CSS需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用。作为一种CSS预处理语言，Less在CSS语言的基础上，增加诸如变量、混合、函数等功能，可以大大简化CSS的编写，并且降低了CSS的维护成本，让CSS更易维护。现有技术中，Less代码是一个一个模块的，分散性大，类似编程语言的面向过程，代码结构不清晰，封装完的less代码，体积大，代码复用性低，不能很好地适用于很多项目，且使用不方便，执行效率一般。针对该问题，本发明实施例提供了一种Less库的封装方法及装置，以简化Less库的代码结构，提高代码的复用性。下面首先结合具体实施例对Less库的封装方法进行详细说明。

参见图1，图1为本发明实施例的Less库的封装方法的流程图，包括如下步骤：

S101，根据待实现目标CSS文件的功能，建立多个Less代码子模块，其中，多个Less代码子模块之间存在调用关系，每一个Less代码子模块实现目标CSS文件的一个或多个功能。

一般的，待实现目标CSS文件包括多个功能，为了使编写CSS的过程简化，可通过编写Less代码，然后编译Less代码，生成目标CSS文件。Less代码是由多个Less代码子模块组成的，目标CSS文件的每个功能通过不同的Less代码子模块来实现，或者多个功能由一个Less代码子模块来实现。实际应用中，一个Less代码子模块(A子模块)中的部分代码与另外一个Less代码子模块(B子模块)中的部分代码相同，为了避免代码的重复累赘，将相同的代码提取出来，建立独立的Less代码子模块(C子模块)，A子模块和B子模块直接调用C子模块即可。

S102，将多个Less代码子模块添加至Less文件，生成Less库文件，其中，Less库文件用于在编译后生成目标CSS文件。

本发明实施例中，Less库文件为*.less文件，*为Less库文件的名称。编译该*.less文件可生成目标CSS文件。一般的，Less库文件实现的CSS文件的功能，也是在编写Less代码过程中经常使用的功能，那么，在需要实现同样功能的情况下，直接调用该Less库文件即可。具体的，通过@import"less文件名"来引入该less库。例如，Less库文件为common.less，那么，在使用该Less库文件编写Less代码时，通过@import"common"即可。需要说明的是，less文件中的内容为Less代码，Less代码包含多个Less代码子模块。相应地，上述common.less文件中包含多个Less代码子模块。

可见，本发明实施例的Less库的封装方法，根据待实现目标CSS文件的功能，建立多个Less代码子模块；将所述多个Less代码子模块添加至Less文件，生成Less库文件。通过Less代码子模块之间的调用关系，使封装完成的Less库文件不仅代码体积小，结构简单，而且易于维护和拓展，适用范围更广。

可选的，本发明实施例的Less库的封装方法中，根据待实现目标CSS文件的功能，建立多个Less代码子模块，包括：

建立公用模块，其中，公用模块用于实现多个Less代码子模块中的至少两个Less代码子模块中的功能。

调用公用模块，生成第一类Less代码子模块，其中，第一类Less代码子模块包括至少一个Less代码子模块。

通常，多个Less代码子模块之间存在公用模块，多个Less代码子模块具有相同或相似的代码结构单元，例如，S101中的C子模块，公用模块除了可独立实现公用模块的功能外，调用该公用模块的Less代码子模块可在该公用模块的基础上实现自身的功能。A子模块和B子模块除了具有C子模块的功能外，各自可以实现各自其他的功能。A子模块和B子模块为第一类Less代码子模块，当然，第一类Less代码子模块可以有很多个。这样，通过公用模块的调用，可以简化Less代码，使得Less代码结构清晰，体积小。

可选的，本发明实施例的Less库的封装方法，还包括：

调用公用模块和/或、第一类Less代码子模块中的至少一个Less代码子模块，生成第二类Less代码子模块，其中，第二类Less代码子模块包括一个或多个Less代码子模块。

本发明实施例中，在调用公用模块生成第一类Less代码子模块后，第一类Less代码子模块中的一个或多个Less代码子模块进一步地被调用，生成第二类Less代码子模块，第二类Less代码子模块中可以调用多个Less代码子模块，可以调用一个或多个第一类Less代码子模块，也可以调用第一类Less代码子模块和公用模块。实际应用中，还可以调用公用模块和/或、第一类Less代码子模块和/或、第二类Less代码子模块，生成第三类Less代码子模块。依次类推，还可以生成第四类Less代码子模块、第五类Less代码子模块等，在此不再赘述。

下面以具体代码为例进行详细描述。

通过上述代码可以看出，.bc()代码子模块中调用了.tc()，同时还实现了margin-right:auto和margin-left:auto，而.line()代码子模块中不仅调用了.tc()和.bc()，同时还实现了border-color:@c、border-width:1px和border-style:@y。其中，.tc()也就是上述公用模块，相应地，.bc()代码子模块为第一类Less代码子模块，.line()代码子模块为第二类Less代码子模块。Less代码子模块的继承性使得Less代码结构紧凑，提高了代码的复用性。

可选的，本发明实施例的Less库的封装方法中，将多个Less代码子模块添加至Less文件，生成Less库文件的步骤，包括：

通过koala软件和sublime编译器编写Less文件；或

通过compass编写Less文件；或

通过gulp编写Less文件，生成Less库文件。

需要说明的是，编写Less文件的方法有很多种，可以通过koala软件和sublime编译器编写Less文件，可以通过compass编写Less文件，也可以通过gulp编写Less文件，也可以是现有技术中其他任意一种方法。其中，上述三种编写Less文件的方法属于现有技术，具体使用方法与现有技术相同，这里不再赘述。

可选的，本发明实施例的Less库的封装方法中，多个Less代码子模块之间存在参数的传递。

实际应用中，传统Less代码中并没有传递参数，存在一定的局限性；本发明实施例中，Less代码可以混合传参，还可以进行传参运算，代码复用性更高。

代码一：

代码二：

举例而言，上述代码一为现有技术中参数设置方法，代码二为本发明实施例中的参数设置方法，@radius即为传递的参数，通过@radius+10设置参数比直接赋值更方便，尤其是对参数进行修改时，直接修改@radius:5px可达到修改多个参数的目的。或者，在受多个参数影响的情况下，本发明实施例中通过传参运算来设置参数，更方便快捷，代码更易维护。

相应于上述方法实施例，本发明实施例还提供了一种Less库的封装装置，参见图2，图2为本发明实施例的Less库的封装装置的一种结构图，包括：

子模块建立模块201，用于根据待实现目标CSS文件的功能，建立多个Less代码子模块，其中，多个Less代码子模块之间存在调用关系，每一个Less代码子模块实现目标CSS文件的一个或多个功能。

Less库文件生成模块202，用于将多个Less代码子模块添加至Less文件，生成Less库文件，其中，Less库文件用于在编译后生成目标CSS文件。

可见，本发明实施例的Less库的封装装置，根据待实现目标CSS文件的功能，建立多个Less代码子模块；将所述多个Less代码子模块添加至Less文件，生成Less库文件。通过Less代码子模块之间的调用关系，使封装完成的Less库文件不仅代码体积小，结构简单，而且易于维护和拓展，适用范围更广。

需要说明的是，本发明实施例的装置是应用上述Less库的封装方法的装置，则上述Less库的封装方法的所有实施例均适用于该装置，且均能达到相同或相似的有益效果。

参见图3，图3为本发明实施例的Less库的封装装置的另一种结构图，包括：子模块建立模块300和Less库文件生成模块310，其中，子模块建立模块300包括：

公用模块建立单元301，用于建立公用模块，其中，用模块用于实现多个Less代码子模块中的至少两个Less代码子模块中的功能。

第一类Less代码生成单元302，用于调用公用模块，生成第一类Less代码子模块，其中，第一类Less代码子模块包括至少一个Less代码子模块。

第二类Less代码生成单元303，用于调用所述公用模块和/或、所述第一类Less代码子模块中的至少一个Less代码子模块，生成第二类Less代码子模块，其中，所述第二类Less代码子模块包括一个或多个Less代码子模块。

Less库文件生成模块310，包括：

第一Less编写单元311，用于通过koala软件和sublime编译器编写Less文件，生成Less库文件。或

第二Less编写单元312，用于通过compass编写Less文件，生成Less库文件。或

第三Less编写单元313，用于通过gulp编写Less文件，生成Less库文件。

可选的，本发明实施例的Less库的封装装置中，多个Less代码子模块之间存在参数的传递。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于***实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims

1.一种Less库的封装方法，其特征在于，包括：

2.根据权利要求1所述的Less库的封装方法，其特征在于，所述根据待实现目标CSS文件的功能，建立多个Less代码子模块，包括：

3.根据权利要求2所述的Less库的封装方法，其特征在于，还包括：

4.根据权利要求1所述的Less库的封装方法，其特征在于，所述将所述多个Less代码子模块添加至Less文件，生成Less库文件的步骤，包括：

通过koala软件和sublime编译器编写所述Less文件；或

通过compass编写所述Less文件；或

通过gulp编写所述Less文件，生成Less库文件。

5.根据权利要求1所述的Less库的封装方法，其特征在于，包括：所述多个Less代码子模块之间存在参数的传递。

6.一种Less库的封装装置，其特征在于，包括：

7.根据权利要求6所述的Less库的封装装置，其特征在于，所述子模块建立模块包括：

8.根据权利要求7所述的Less库的封装装置，其特征在于，所述子模块建立模块还包括：

9.根据权利要求6所述的Less库的封装装置，其特征在于，所述Less库文件生成模块，包括：

第二Less编写单元，用于通过compass编写所述Less文件；或

10.根据权利要求6所述的Less库的封装装置，其特征在于，包括：所述多个Less代码子模块之间存在参数的传递。