[发明专利]制作网页模板的方法及系统

说明书

本发明公开了一种制作网页模板的方法及系统，所述方法包括：新建Less文件，所述Less文件包含所述网页模板的样式；在Html页面引入所述Less文件；在所述Html页面中引入Less插件，利用所述Less插件识别所述Less文件；将所述Less文件编译为Css文件，前端开发人员通过定义通用变量和/或通用混合来制作网页模板，当前端开发人员需要修改整体样式时，不需要按照Css的方法，逐一修改每一变量的值，仅需修改其定义的通用变量和/或通用混合即可，大大提高了前端开发人员的开发效率。

技术领域

本发明涉及计算机技术领域，具体涉及前端开发技术，尤其涉及一种制作网页模板的方法及系统。

背景技术

随着信息技术的发展，人们每天都要使用各种互联网产品。而前端开发的主要作用就是把网站或APP(应用程序)的界面更好地呈现给人们，从而吸引用户。

Css指代层叠样式列表，其是用来定义如何显示HTML(超文本标记语言)中的元素，实现网页静态或者动态布局的一种计算机程序语言。Css能对网页中元素的位置以及排版格式进行控制，并且支持几乎所有的字体样式，因此成为前端开发中使用的一种主要计算机语言。

在Css中如需要在类选择器中定义各属性的值，需要一个个分别去定义，如需要修改所定义的属性值，也需要一个个分别去修改，因此，在需要修改网页模板全局样式的情况下，对前端开发人员造成了很大的负担。

发明内容

本发明要解决的技术问题是为了克服现有技术中在制作与修改网页模板，特别是在做全局修改时，需要逐个修改，不利于前端开发人员有效率地开发前端界面的缺陷，提供一种制作网页模板的方法及系统。

本发明是通过下述技术方案来解决上述技术问题：

一种制作网页模板的方法，所述方法包括下述步骤：

S1.新建Less文件，所述Less文件包含所述网页模板的样式；

S2.在Html页面引入所述Less文件；

S3.在所述Html页面中引入Less插件，利用所述Less插件识别所述Less文件；

S4.将所述Less文件编译为Css文件。

较佳地，所述S1中制作网页模板的样式的方式为定义通用变量，所述通用变量用于给选择器和/或属性赋值。

较佳地，所述S1中制作网页模板的样式的方式为定义通用混合，混合是将一个定义好的类选择器引入到另一个类选择器的一种方式，所述通用混合用于给选择器集和/或属性集赋值。

较佳地，所述通用混合包括：带参数混合、不带参数的混合，所述带参数混合指定义的类选择器中包含参数，所述不带参数的混合指定义的类选择器中不包含参数。

较佳地，通过将Less文件所在的目录放入编译工具中进行自动编译，所述目录为Less文件的储存路径。

一种制作网页模板的系统，所述系统包括：文件新建模块、文件引入模块、文件识别模块及文件编译模块；

所述文件新建模块用于新建Less文件，所述Less文件包含所述网页模板的样式；

所述文件引入模块用于在Html页面引入所述Less文件；

所述文件识别模块用于在所述Html页面中引入Less插件，利用所述Less插件识别所述Less文件；

所述文件编译模块用于将所述Less文件编译为Css文件。

较佳地，所述文件新建模块中制作网页模板的样式的方式为定义通用变量，所述通用变量用于给选择器和/或属性赋值。