生成级联样式表代码的方法及装置的制造方法_2

文档序号:9375327阅读:来源:国知局

[0067] 删除子模块,用于删除包含所述子对象的对象中的所述嵌套格式的代码。
[0068] 通过检测样式描述代码中的嵌套格式的代码,并为嵌套格式的代码生成子对象的 描述代码,提高了编写CSS代码的效率。
[0069] 根据本公开实施例的第三方面,提供一种生成级联样式表代码的装置,包括:
[0070] 处理器;
[0071] 用于存储处理器可执行指令的存储器;
[0072] 其中,所述处理器被配置为:
[0073] 获取待编译的级联样式表CSS代码,所述待编译的CSS代码中包括声明代码以及 样式描述代码;
[0074] 根据所述声明代码以及所述声明代码对应的代码编译规则对所述样式描述代码 进行编译,生成所述样式描述代码对应的原生CSS代码。
[0075] 本公开的实施例提供的技术方案可以包括以下有益效果:
[0076] 通过对待编译的CSS代码中的声明代码对待编译的CSS代码中的样式描述代码进 行编译,将待编译的CSS代码还原为原生的CSS代码。可以在后续对CSS代码的维护过程 中直接修改声明代码即可对完整的CSS代码进行维护,无需修改完整的CSS代码,提高编写 后的CSS代码的可维护性和维护效率。
【附图说明】
[0077] 此处的附图被并入说明书中并构成本说明书的一部分,示出了符合本公开的实施 例,并与说明书一起用于解释本公开的原理。
[0078] 图1是根据一示例性实施例示出的一种生成级联样式表代码的方法的流程图;
[0079] 图2是根据一示例性实施例示出的一种生成级联样式表代码的方法的流程图;
[0080] 图3是根据一示例性实施例示出的一种生成级联样式表代码的方法的流程图;
[0081] 图4是根据一示例性实施例示出的一种生成级联样式表代码的方法的流程图;
[0082] 图5是根据一示例性实施例示出的一种生成级联样式表代码的方法的流程图;
[0083] 图6是根据一示例性实施例示出的一种生成级联样式表代码的方法的流程图;
[0084] 图7是根据一示例性实施例示出的一种生成级联样式表代码的装置的框图;
[0085] 图8是根据一示例性实施例示出的一种生成级联样式表代码的装置中编译模块 的框图;
[0086] 图9是根据一示例性实施例示出的一种生成级联样式表代码的装置的框图;
[0087] 图10是根据一示例性实施例示出的一种生成级联样式表代码的装置的框图。
【具体实施方式】
[0088] 为使本公开的目的、技术方案和优点更加清楚,下面将结合附图对本公开实施方 式作进一步地详细描述。
[0089] 本公开一示例性实施例提供了一种生成级联样式表代码的方法,参见图1,方法流 程包括:
[0090] 在步骤101中,获取待编译的级联样式表CSS代码,待编译的CSS代码中包括声明 代码以及样式描述代码。
[0091] 其中,声明代码并非用于描述网页中样式的代码,而是用于告知编译器如何识别 样式描述代码中面向对象的方式编写的代码;样式描述代码则是用于描述网页中样式的代 码,使用的是面向对象的方式编写的代码。
[0092] 在步骤102中,根据声明代码以及声明代码对应的代码编译规则对样式描述代码 进行编译,生成样式描述代码对应的原生CSS代码。
[0093] 其中,原生CSS代码为按照CSS的语法规则编写的代码,可以被浏览器识别并对网 页进行排版的代码。
[0094] 其中,本公开实施例中的待编译的CSS代码中包括两类代码。
[0095] 第一类代码为:声明代码,其中,声明代码包括但不限定有以下四种形式:
[0096] 包括:
[0097] 第一种:声明变量;
[0098] 其中,包括变量名和变量值;
[0099] 例如:@color:#FFF ;即Ocolor为变量名,#FFF为变量值。
[0100] 第二种:声明函数;
[0101] 其中,包括函数名和函数体,以及默认函数变量;
[0102] 例如:
[0103] . round-corners(iradius:5px){
[0104] border-radius:iradius ;
[0105] -webkit-border-radius: (iradius ;/*webkit 浏览器的私有属性 */
[0106] -moz-border-radius:(iradius ;}/*Firefox 浏览器的私有属性 */
[0107] 其中,.round-corners为函数名,(iradius为函数变量,5px为默认函数变量值;{} 中的内容为函数体。
[0108] 第三种:声明类;
[0109] 其中,包括类体内容;
[0110] 例如:
[0111] . Base{
[0112] color :#FFF ;
[0113] font-size:14px ;
[0114] }
[0115] 其中,Base为类名;{}中的内容为类体内容。
[0116] 第四种:声明导入文件;
[0117] 其中,包括待导入文件的路径;
[0118] 例如:@include 'test, css' ;
[0119] 其中,通过Oinclude可以确定为导入代码的信息,'test, css'为路径信息。
[0120] 第二类代码为:样式描述代码,即编程人员通过面向对象的方式开发的待编译的 CSS代码。
[0121] 另外,本公开实施例可以在服务器侧或者终端侧执行。
[0122] 当实施场景在服务器侧时,可以为编程人员对通过面向对象的方式开发的待编译 的CSS代码的文件上传至服务器后,由服务器中的编译引擎转换为原生CSS代码,再将转换 后的原生CSS代码的文件保存在指定的网页文件的存储区域中。
[0123] 当实施场景在终端侧时,可以为用户通过浏览器打开网页,浏览器下载了该网页 中的包含待编译的CSS代码的文件后,通过浏览器中的编译引擎对该包含待编译的CSS代 码的文件进行转换,并在转换为原生CSS代码后对该网页进行排版显示。
[0124] 在对CSS代码进行维护时,编程人员可以直接修改待编译的CSS代码的文件中的 声明代码,再对该修改后的待编译的CSS代码进行编译,进而得到修改后的完整的原生CSS 代码,无需修改CSS代码中的完整文件。
[0125] 本公开实施例通过对待编译的CSS代码中的声明代码对待编译的CSS代码中的样 式描述代码进行编译,将待编译的CSS代码还原为原生的CSS代码。可以在后续对CSS代 码的维护过程中直接修改声明代码即可对完整的CSS代码进行维护,无需修改完整的CSS 代码,提高编写后的CSS代码的可维护性和维护效率。
[0126] 本公开一示例性实施例提供了一种生成级联样式表代码的方法,参见图2,方法流 程包括:
[0127] 在步骤201中,获取待编译的级联样式表CSS代码,待编译的CSS代码中包括声明 代码以及样式描述代码。
[0128] 在步骤202中,如果在样式描述代码中查找到变量,则在声明代码中查找变量的 变量值。
[0129] 其中,查找变量的方式为查找@起始的字符。
[0130] 例如:待编译的CSS代码为:
[0131] @color:#FFF ;(此处为声明代码)/*声明颜色为#FFF*/
[0132] Sheader {
[0133] color:Ocolor ;
[0134] }(此处为样式描述代码)
[0135] 在检测到#header对象中有预先声明的变量Ocolor时,在声明代码区域查找@ color对应的变量值#FFF。
[0136] 在步骤203中,将变量的变量值替换查找到的变量。
[0137] 将#FFF替换样式描述代码中的Ocolor,转换后原生的CSS代码为:
[0138] Sheader {
[0139] color :#FFF ;
[0140] }
[0141] 可选的,如果在变量所在的语句中存在有运算公式,则可以进一步的对变量的变 量值根据该运算公式进行运算,再将结果替换变量。
[0142] 因此,步骤203可以通过以下方式进行实现:
[0143] 在步骤2031中,如果在包含变量的语句中检测到了运算式,则根据运算式对变量 的变量值进行运算。
[0144] 例如:
[0145] @base-size :12px ;/*声明规格大小为12px*/(此处为声明代码)
[0146] #body {
[0147] font-size: Obase-size+2 ;(此处为样式描述代码)
[0148] }
[0149] 其中,可以在声明代码中确定@base-size的变量值为12px,在检测到运算式为@ base-size+2后,将变量值进行该运算式的运算得到14px。
[0150] 可选的,运算式中可以为多个变量之间进行的运算;也可以为一个变量和一个数 值之间的运算。
[0151] 在步骤2032中,将运算后的变量值替换查找到的变量
当前第2页1 2 3 4 5 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1