CSS编译方法、样式更新方法、装置、介质及设备与流程

css编译方法、样式更新方法、装置、介质及设备
技术领域
1.本公开涉及计算机技术领域，具体地，涉及一种css编译方法、样式更新方法、装置、介质及设备。


背景技术：

2.随着前端技术的发展，用户对应用程序运行时进行动态修改的需求逐渐增多，例如在应用程序运行过程中进行皮肤更换、主题模式实时预览等。相关技术中采用可以实时交互的css变量以上述需求。
3.现有的项目大部分是基于css扩展语言编写的样式文件，css扩展语言可以支持变量、函数、运算、循环等特征。相关技术中，通常会基于该css扩展语言编写的样式文件再编写一份等同的css文件，从而通过维护两个文件实现应用程序的运行中调整的功能。然而通过上述方案，需要额外编写代码，并且需要维护两套代码，代码改造成本大，且不便于维护。


技术实现要素：

4.提供该发明内容部分以便以简要的形式介绍构思，这些构思将在后面的具体实施方式部分被详细描述。该发明内容部分并不旨在标识要求保护的技术方案的关键特征或必要特征，也不旨在用于限制所要求的保护的技术方案的范围。
5.第一方面，本公开提供一种css编译方法，所述方法包括：
6.获取样式表对应的源文件，其中，所述源文件中的代码为基于css扩展语言编写的；
7.基于所述源文件对应的代码类型，确定所述源文件中的目标变量信息，其中所述目标变量信息包含目标变量以及所述目标变量之间的关联关系；
8.基于所述目标变量之间的关联关系对所述源文件进行编译，获得所述源文件对应的css文件和映射文件，其中，所述css文件中包含每一所述目标变量对应的css变量，所述映射文件中包含所述css变量之间的映射关系。
9.第二方面，本公开提供一种css样式更新方法，所述方法包括：
10.响应于目标应用程序中选择的目标样式，获得所述目标样式下各个css变量的目标取值，其中所述目标应用程序的代码文件中包含css文件和映射文件，所述css文件和所述映射文件是基于第一方面所述的css编译方法编译生成的；
11.针对所述目标样式下的每一css变量，将所述css文件中与该css变量对应的取值更新为所述目标取值；
12.针对所述目标样式下的每一css变量，根据所述css变量的目标取值和所述映射文件，确定所述css文件中与所述css变量关联的关联css变量的更新取值，并将所述css文件中所述关联css变量的取值更新为所述更新取值。
13.第三方面，本公开提供一种css编译装置，所述装置包括：
14.第一获取模块，用于获取样式表对应的源文件，其中，所述源文件中的代码为基于
css扩展语言编写的；
15.确定模块，用于基于所述源文件对应的代码类型，确定所述源文件中的目标变量信息，其中所述目标变量信息包含目标变量以及所述目标变量之间的关联关系；
16.编译模块，用于基于所述目标变量之间的关联关系对所述源文件进行编译，获得所述源文件对应的css文件和映射文件，其中，所述css文件中包含每一所述目标变量对应的css变量，所述映射文件中包含所述css变量之间的映射关系。
17.第四方面，本公开提供一种css样式更新装置，所述装置包括：
18.第二获取模块，用于响应于目标应用程序中选择的目标样式，获得所述目标样式下各个css变量的目标取值，其中所述目标应用程序的代码文件中包含css文件和映射文件，所述css文件和所述映射文件是基于第一方面所述的css编译方法编译生成的；
19.第一更新模块，用于针对所述目标样式下的每一css变量，将所述css文件中与该css变量对应的取值更新为所述目标取值；
20.第二更新模块，用于针对所述目标样式下的每一css变量，根据所述css变量的目标取值和所述映射文件，确定所述css文件中与所述css变量关联的关联css变量的更新取值，并将所述css文件中所述关联css变量的取值更新为所述更新取值。
21.第五方面，本公开提供一种计算机可读介质，其上存储有计算机程序，该程序被处理装置执行时实现第一方面所述方法的步骤。
22.第六方面，本公开提供一种电子设备，包括：
23.存储装置，其上存储有计算机程序；
24.处理装置，用于执行所述存储装置中的所述计算机程序，以实现第一方面所述方法的步骤。
25.在上述技术方案中，通过确定源文件中的目标变量以及所述目标变量之间的关联关系，从而可以基于目标变量之间的关联关系对所述源文件进行编译，获得所述源文件对应的css文件和映射文件。由此，通过上述技术方案，可以基于css扩展语言下的源文件自动编译出包含css变量的css文件，无需用户手动编写，降低人工工作量的同时，可以有效降低需要维护的代码数量，提高代码维护的安全性和效率。并且在编译的过程中生成映射文件，从而可以对css编译过程中的逻辑关系进行保存，为基于编译出的文件运行相应应用时的动态样式更新提供有效的数据支持，贴合用户的使用需求。
26.本公开的其他特征和优点将在随后的具体实施方式部分予以详细说明。
附图说明
27.结合附图并参考以下具体实施方式，本公开各实施例的上述和其他特征、优点及方面将变得更加明显。贯穿附图中，相同或相似的附图标记表示相同或相似的元素。应当理解附图是示意性的，原件和元素不一定按照比例绘制。在附图中：
28.图1是根据本公开的一种实施方式提供的css编译方法的流程图；
29.图2是根据本公开的一种实施方式提供的css编译方法的流程图；
30.图3是根据本公开的一种实施方式提供的css编译装置的框图；
31.图4是根据本公开的一种实施方式提供的css样式更新装置的框图；
32.图5示出了适于用来实现本公开实施例的电子设备的结构示意图。
具体实施方式
33.下面将参照附图更详细地描述本公开的实施例。虽然附图中显示了本公开的某些实施例，然而应当理解的是，本公开可以通过各种形式来实现，而且不应该被解释为限于这里阐述的实施例，相反提供这些实施例是为了更加透彻和完整地理解本公开。应当理解的是，本公开的附图及实施例仅用于示例性作用，并非用于限制本公开的保护范围。
34.应当理解，本公开的方法实施方式中记载的各个步骤可以按照不同的顺序执行，和/或并行执行。此外，方法实施方式可以包括附加的步骤和/或省略执行示出的步骤。本公开的范围在此方面不受限制。
35.本文使用的术语“包括”及其变形是开放性包括，即“包括但不限于”。术语“基于”是“至少部分地基于”。术语“一个实施例”表示“至少一个实施例”；术语“另一实施例”表示“至少一个另外的实施例”；术语“一些实施例”表示“至少一些实施例”。其他术语的相关定义将在下文描述中给出。
36.需要注意，本公开中提及的“第一”、“第二”等概念仅用于对不同的装置、模块或单元进行区分，并非用于限定这些装置、模块或单元所执行的功能的顺序或者相互依存关系。
37.需要注意，本公开中提及的“一个”、“多个”的修饰是示意性而非限制性的，本领域技术人员应当理解，除非在上下文另有明确指出，否则应该理解为“一个或多个”。
38.本公开实施方式中的多个装置之间所交互的消息或者信息的名称仅用于说明性的目的，而并不是用于对这些消息或信息的范围进行限制。
39.图1所示为根据本公开的一种实施方式提供的css编译方法的流程图，如图1所示，所述方法可以包括：
40.在步骤11中，获取样式表对应的源文件，其中，所述源文件中的代码为基于css扩展语言编写的。
41.其中，该源文件可以是现有的项目中的样式文件，该css扩展语言可以是less语言、scss语言等，代码开发人员可以直接基于css扩展语言进行样式开发，降低对开发人员的技术要求。
42.在步骤12中，基于源文件对应的代码类型，确定源文件中的目标变量信息，其中目标变量信息包含目标变量以及所述目标变量之间的关联关系。
43.作为示例，该源文件对应的代码类型可以根据源文件的后缀名确定，例如后缀名.scss表示代码类型为scss类型，后缀名.less表示代码类型为less类型，在确定出代码类型后则可以根据相应类型下的变量定义规则进一步地识别其中的目标变量。
44.在步骤13中，基于目标变量之间的关联关系对源文件进行编译，获得源文件对应的css文件和映射文件，其中，所述css文件中包含每一所述目标变量对应的css变量，所述映射文件中包含所述css变量之间的映射关系。
45.其中，该css文件和映射文件可以直接被其他文件导入，以应用该css文件中定义的相关样式，其可以采用import的方式进行导入，在此不再赘述。该映射文件可以在js sdk初始化以及css变量的取值有更新时进行应用。
46.在上述技术方案中，通过确定源文件中的目标变量以及所述目标变量之间的关联关系，从而可以基于目标变量之间的关联关系对所述源文件进行编译，获得所述源文件对应的css文件和映射文件。由此，通过上述技术方案，可以基于css扩展语言下的源文件自动
编译出包含css变量的css文件，无需用户手动编写，降低人工工作量的同时，可以有效降低需要维护的代码数量，提高代码维护的安全性和效率。并且在编译的过程中生成映射文件，从而可以对css编译过程中的逻辑关系进行保存，为基于编译出的文件运行相应应用时的动态样式更新提供有效的数据支持，贴合用户的使用需求。
47.在一种可能的实施例中，在步骤12中基于源文件对应的代码类型，确定源文件中的目标变量信息的示例性实现方式如下，该步骤可以包括：
48.根据所述源文件对应的代码类型的语言规则，提取所述源代码中的目标变量的变量名称。
49.如上文所述，可以基于源文件的后缀名确定源文件对应的代码类型。作为示例，代码类型为less类型，在less类型的语言规则下在定义变量时，是基于@加变量名称进行变量定义声明的，例如：
50.@primary-color:#000000
51.即定义变量primary-color，其取值为#000000。
52.因此，可以对源文件中以@声明的变量进行识别，并将识别出的变量作为该目标变量，将@后的字段作为目标变量的变量名称。
53.作为另一示例，若源文件的代码类型为scss，则其在定义变量时是基于$进行定义的，在该示例下可以对源文件中以$声明的变量进行识别，并将识别出的变量作为该目标变量，将$后的字段作为目标变量的变量名称。其他扩展语言下的目标变量的检测方式与上述方式类似，在此不再赘述。
54.之后，根据所述源文件对应的抽象语法树和所述目标变量，确定所述目标变量之间的关联关系。
55.其中，可以基于本领域中常用的语法分析对源文件进行分析，获得所述源文件对应的抽象语法树(abstract syntax tree，ast)，从而可以基于该抽象语法树的节点和对应的目标变量，获得不同的目标变量之间的关联关系。例如：
56.@button-width:100px；
57.@button-height:@button-width*2；
58.由上述可知，在源文件中定义了变量button-width和button-height，其中，button-height的取值为button-height的取值的2倍，则可以基于抽象语法树确定该变量button-height和变量button-width之间的关联关系，以便于后续在变量取值更新时，可以同时更新该两个变量。
59.由此，可以基于源文件对应的代码类型下的语言规则对源文件进行解析，从而获得源文件中样式相关的变量的信息，为后续进行css变量的编译提供可靠的数据支持，保证编译过程的准确性和安全性。
60.在一种可能的实施例中，在步骤13中基于目标变量之间的关联关系对所述源文件进行编译，获得所述源文件对应的css文件和映射文件的示例性实现方式如下，该步骤可以包括：
61.基于css对应的样式表规则和所述目标变量，生成每一所述目标变量对应的css变量。
62.其中，在css样式表规则中，定义css变量时需要在自定义的变量前添加双横线前
缀，从而实现css变量的定义，进而实现赋值操作。示例地，如上文所示，确定出的目标变量为button-width和button-height，因此基于可以确定该目标变量在css样式表规则下的css变量，表示如下：
63.‑‑
button-width和
‑‑
button-height。
64.之后，根据所述目标变量之间的关联关系，确定每一所述css变量的取值以添加至所述css文件中。
65.如上所示的两个目标变量，其中button-width的取值为直接定义的，因此，可以直接将该取值作为其对应的css变量的取值，即定义css变量如下：
66.‑‑
button-width:100px；
67.针对目标变量button-height，其取值是基于button-width的取值确定的，button-height的取值为button-width的取值的2倍，则可以基于该关联关系，确定出的button-height的取值，即200px(100px*2)，因此，进一步定义css变量如下：
68.‑‑
button-height:200px；
69.在本公开实施例中，在确定css变量的取值时，定义的全局变量声明的取值可以均计算为其对应的数值。在css文件中，可以通过
‑‑
root{}来存放定义的css变量，从而可以在后续定义不同的样式标签或者样式类的时候直接调用。因此，在该实施例中可以将定义好的css变量存储在css文件中的root目录下，以便于后续的调用过程。
70.之后，根据所述目标变量之间的关联关系，生成所述目标变量对应的css变量之间的映射关系，并将所述映射关系和所述css变量映射存储至所述映射文件。
71.如上所示，目标变量button-height和button-width之间的关联关系为button-height的取值为button-width的取值的2倍，则可以将该关联关系作为该目标变量对应的css变量之间的映射关系，并进行存储。作为示例，该映射关系的存储可以采用键值对(key-value)的方式存储在映射文件中，该映射文件可以为json文件。其中，key可以是需要进行赋值的目标变量对应的css变量，value可以是对应的映射文件的描述信息，通过键值对的方式进行关联存储可以在后续查询时直接基于css变量获得对应的映射关系，进而基于该映射关系进行逻辑运算并进行赋值。
72.又如，在源代码中还有变量定义如下：
73.@primary-color:#000000；
74.@button-background-color:fade(var(primary-color).10％)；
75.相应地，可以通过识别@标识符确定目标变量primary-color和button-background-color，其中，可以获得分别对应的css变量定义如下：
76.‑‑
primary-color:#000000；
77.‑‑
button-background-color:rgba(0,0,0,0.1)；
78.其中，
‑‑
primary-color的定义方式与上文所述相同，在此不再赘述。在还实施例中，fade为less的内置颜色计算，其难以直接通过css编译。在该实施例中，fade(color,amount)中的color代表颜色对象，amount的取值为为0-100％之间的百分比，用于表示透明度。针对fade等less中的计算规则，可以预先通过对应关系确定该类函数在css样式表规则下的确定方式，在该实施例中，可以将fade中的参数color转换成rgb的颜色参数，该方式可以基于本领域通用的颜色表示方式进行转换确定，同时保留对透明度的设置，获得css样式
表规则下的表示方式，即rgba(0,0,0,0.1)，表示颜色为rgb(0,0,0)，透明度为0.1，实现与less下的fade(var(primary-color).10％)的等价转换。
79.由此，可以针对源文件中的每一定义的目标变量进行编译以获得相对应的css变量并生成css文件，进一步降低开发人员的工作量，同时可以提高编译后的css文件和源文件中的变量的一致性，避免由于人为编写另一套代码导致的代码差异，保证应用运行显示的一致性。
80.在一种可能的实施例中，所述源代码中还包括应用所述目标变量的样式定义。
81.其中，源文件中的目标变量定义之后，可以在之后的样式定义，如样式表或者样式标签定义时直接调用。例如源文件中定义样式如下：
82..byted-button{
83.background-color:@button-background-color；
84.width:@button-width；
85.height:@button-height；
86.}
87.相应地，所述基于目标变量之间的关联关系对所述源文件进行编译，获得所述源文件对应的css文件和映射文件的示例性实现方式如下，该步骤可以包括：
88.针对所述源代码中的所述样式定义，将所述样式定义中的目标变量替换为所述目标变量对应的css变量的引用函数，获得css样式定义，并将所述css样式定义添加至css文件中。
89.其中，在css样式表规则下，可以通过var()函数来使用定义好的css变量，其中var()函数用于插入自定义的属性值，可以作为本公开中css变量的引用函数，如上述示例，var(button-width)可以为button-width的引用，在button-width的取值更新后，var(button-width)可以为更新后的取值。
90.接上文示例，在该步骤中可以按照代码顺序依次遍历每一标签，将对应标签中的目标变量进行替换，例如，获得的第一个标签为background-color，其中的目标变量为@button-background-color，确定出的该目标变量的css变量为
‑‑
button-background-color，相应地替换为引用函数后可以表示为：
91.background-color:var(
‑‑
button-background-color)；
92.相应地，通过上述类似的方式，该样式定义.byted-button的css样式定义表示如下：
93..byted-button{
94.background-color:var(
‑‑
button-background-color)；
95.width:var(
‑‑
button-width)；
96.height:var(
‑‑
button-height)；
97.}
98.由此，通过上述技术方案，可以通过将样式定义中的目标变量替换为css变量的引用函数的方式，使得在css样式定义中可以对css变量进行引用，以保证css变量取值的一致性，使得相应标签的取值可以直接基于css变量的取值的变化而变化，在样式更新是无需对多个参数进行重新赋值调整等操作，保证基于css变量确定出的样式定义的准确性和样式
修改的便利性。
99.在一种可能的实施例中，基于目标变量之间的关联关系对所述源文件进行编译，获得所述源文件对应的css文件和映射文件的示例性实现方式如下，该步骤还可以包括：
100.若获得的所述css样式定义中的标签对应的css变量的引用函数为多个，则基于所述标签对应的css的样式表规则生成多个子标签。
101.其中，在css扩展语言下可以针对一个标签设置多个参数，例如padding标签表示内边距，若参数为一个则表示上下左右的内边距相同，均为该参数的取值。若参数为两个则表示上下的内边距为第一个参数的取值，左右的内边距为第二个参数的取值。
102.若在源代码中的样式定义中包含标签padding，如下：
103.body{
104.padding：@padding-sm@padding-xs；
105.}
106.在通过上述方式确定出的css样式定义则表示如下：
107.body{
108.padding：var(
‑‑
padding-sm)var(
‑‑
padding-xs)；
109.}
110.然而在css的样式定义中，多个引用函数对应的标签并不能够有效运行，因此，在该实施例中针对css样式定义中的标签对应的css变量的引用函数为多个的情况，可以进一步地将该标签进行拆分为多个原子的子标签。
111.例如，该padding包含四个子标签，分别为padding-left、padding-right、padding-top、padding-bottom，其中，padding-left表示左内边距，padding-right表示右内边距，padding-top表示上内边距，padding-bottom表示下内边距。
112.示例地，可以将可能包含多个子标签的标签和其对应的子标签之间的对应关系预先存储，从而在需要对该标签进行编译时，可以直接基于该存储的对应关系生成该标签对应的子标签。例如，标签还可以包括但不限于margin、font、border、outline、flex等等。
113.之后，根据每一所述子标签对应的css的样式表规则和所述标签对应的多个css变量的引用函数，确定每一所述子标签对应的css变量的引用函数；其中可以基于该标签和每一子标签之间的对应关系为每一子标签分配其对应的css变量的引用函数。
114.将所述css样式定义中所述标签和所述标签对应的css变量的引用函数替换为所述每一子标签和所述子标签对应的css变量的引用函数，获得更新后的css文件。
115.如上所示，标签padding可以生成四个子标签padding-left、padding-right、padding-top、padding-bottom，在源文件中的语言规则下，padding-top、padding-bottom的取值应为var(
‑‑
padding-sm)，padding-left、padding-right的取值应为var(
‑‑
padding-xs)，则可以根据源文件中语言规则下的参数分配，确定出每一子标签对应的css变量的引用函数，子标签对应的css样式定义表示如下：
116.padding-top：var(
‑‑
padding-sm)；
117.padding-bottom：var(
‑‑
padding-sm)；
118.padding-left：var(
‑‑
padding-xs)；
119.padding-right：var(
‑‑
padding-xs)；
120.进一步地，可以将上述css样式定义替换css样式定义中所述标签和所述标签对应的css变量的引用函数，即以上述子标签的css样式定义替换padding：var(
‑‑
padding-sm)var(
‑‑
padding-xs)，获得的更新后的css样式定义如下：
121.body{
122.padding-top：var(
‑‑
padding-sm)；
123.padding-bottom：var(
‑‑
padding-sm)；
124.padding-left：var(
‑‑
padding-xs)；
125.padding-right：var(
‑‑
padding-xs)；
126.}
127.由此，通过上述技术方案，可以对直接进行css样式定义生成后的无效样式进行适应性修改，使得编译后的css样式定义符合css样式表规则，提高css编译方法的可用性和有效性。
128.其中，上述css编译方法可以由一个插件进行实现，则在对源文件进行编译的过程中可以通过注入该插件实现css编译，获得相应的css文件和映射文件，实现编译的动态选择，进一步提高css编译的适用范围和便利性。
129.本公开还提供一种css样式更新方法，如图2所示，所述方法可以包括：
130.在步骤21中，响应于目标应用程序中选择的目标样式，获得目标样式下各个css变量的目标取值，其中所述目标应用程序的代码文件中包含css文件和映射文件，所述css文件和所述映射文件是基于上文所述的任一css编译方法编译生成的。
131.示例地，该目标样式可以用户选择的样式，例如可以是用户在当前应用中选择的新的皮肤样式，从而可以基于该目标样式的标识从相应的样式库中获得该目标样式下的各个css变量的目标取值。
132.在步骤22中，针对目标样式下的每一css变量，将css文件中与该css变量对应的取值更新为所述目标取值。
133.示例地，当前设置下的css文件中的css变量background-color为#000000，button-width为100px，button-height为200px，button-color为#ff0000。确定出的目标样式下的css变量为background-color为#ffffff，button-width为120px。
134.相应地，基于确定出的目标样式下的css变量，可以将css文件中的background-color更新为#ffffff，button-width更新为120px。
135.在步骤23中，针对目标样式下的每一css变量，根据css变量的目标取值和映射文件，确定css文件中与css变量关联的关联css变量的更新取值，并将css文件中关联css变量的取值更新为所述更新取值。
136.其中，接上述示例，在目标样式下css变量button-width的取值进行更新，根据映射文件，确定存在与该css变量button-width相关的关联css变量button-height，则可以根据映射文件中的映射关系，确定关联css变量button-height的更新取值，确定出的关联css变量button-height的更新取值为240px(120px*2)，从而实现更新的css变量的关联变量的取值更新。
137.作为示例，针对css文件中未在目标样式下的css变量中更新的相关变量，可以保持其对应的取值不变。
138.由此，通过上述技术方案，通过css变量的方式可以在应用运行过程中对css变量的取值进行更新，由于样式定义中采用的css变量的引用进行定义，从而可以在css变量的取值进行更新后在应用运行过程中对更新后的样式动态即时显示，实现应用运行时的动态样式调整，便于用户进行预览，贴合用户的使用需求，提升用户使用体验。
139.本公开还提供一种css编译装置，如图3所示，所述装置30包括：
140.第一获取模块301，用于获取样式表对应的源文件，其中，所述源文件中的代码为基于css扩展语言编写的；
141.确定模块302，用于基于所述源文件对应的代码类型，确定所述源文件中的目标变量信息，其中所述目标变量信息包含目标变量以及所述目标变量之间的关联关系；
142.编译模块303，用于基于所述目标变量之间的关联关系对所述源文件进行编译，获得所述源文件对应的css文件和映射文件，其中，所述css文件中包含每一所述目标变量对应的css变量，所述映射文件中包含所述css变量之间的映射关系。
143.可选地，所述确定模块包括：
144.提取子模块，用于根据所述源文件对应的代码类型的语言规则，提取所述源代码中的目标变量的变量名称；
145.第一确定子模块，用于根据所述源文件对应的抽象语法树和所述目标变量，确定所述目标变量之间的关联关系。
146.可选地，所述编译模块包括：
147.第一生成子模块，用于基于css对应的样式表规则和所述目标变量，生成每一所述目标变量对应的css变量；
148.第二确定子模块，用于根据所述目标变量之间的关联关系，确定每一所述css变量的取值以添加至所述css文件中；
149.第二生成子模块，用于根据所述目标变量之间的关联关系，生成所述目标变量对应的css变量之间的映射关系，并将所述映射关系和所述css变量映射存储至所述映射文件。
150.可选地，所述源代码中还包括应用所述目标变量的样式定义；
151.所述编译模块包括：
152.第一处理子模块，用于针对所述源代码中的所述样式定义，将所述样式定义中的目标变量替换为所述目标变量对应的css变量的引用函数，获得css样式定义，并将所述css样式定义添加至css文件中。
153.可选地，所述编译模块还包括：
154.第三生成子模块，用于若获得的所述css样式定义中的标签对应的css变量的引用函数为多个，则基于所述标签对应的css的样式表规则生成多个子标签；
155.第三确定子模块，用于根据每一所述子标签对应的css的样式表规则和所述标签对应的多个css变量的引用函数，确定每一所述子标签对应的css变量的引用函数；
156.第二处理子模块，用于将所述css样式定义中所述标签和所述标签对应的css变量的引用函数替换为所述每一子标签和所述子标签对应的css变量的引用函数，获得更新后的css文件。
157.可选地，所述css扩展语言为less语言或scss语言，所述映射文件为json文件。
158.本公开提供一种css样式更新装置，如图4所示，所述装置40包括：
159.第二获取模块401，用于响应于目标应用程序中选择的目标样式，获得所述目标样式下各个css变量的目标取值，其中所述目标应用程序的代码文件中包含css文件和映射文件，所述css文件和所述映射文件是基于上文所述的css编译方法编译生成的；
160.第一更新模块402，用于针对所述目标样式下的每一css变量，将所述css文件中与该css变量对应的取值更新为所述目标取值；
161.第二更新模块403，用于针对所述目标样式下的每一css变量，根据所述css变量的目标取值和所述映射文件，确定所述css文件中与所述css变量关联的关联css变量的更新取值，并将所述css文件中所述关联css变量的取值更新为所述更新取值。
162.下面参考图5，其示出了适于用来实现本公开实施例的电子设备600的结构示意图。本公开实施例中的终端设可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、pda(个人数字助理)、pad(平板电脑)、pmp(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字tv、台式计算机等等的固定终端。图5示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。
163.如图5所示，电子设备600可以包括处理装置(例如中央处理器、图形处理器等)601，其可以根据存储在只读存储器(rom)602中的程序或者从存储装置608加载到随机访问存储器(ram)603中的程序而执行各种适当的动作和处理。在ram 603中，还存储有电子设备600操作所需的各种程序和数据。处理装置601、rom 602以及ram 603通过总线604彼此相连。输入/输出(i/o)接口605也连接至总线604。
164.通常，以下装置可以连接至i/o接口605：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置606；包括例如液晶显示器(lcd)、扬声器、振动器等的输出装置607；包括例如磁带、硬盘等的存储装置608；以及通信装置609。通信装置609可以允许电子设备600与其他设备进行无线或有线通信以交换数据。虽然图5示出了具有各种装置的电子设备600，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。
165.特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在非暂态计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置609从网络上被下载和安装，或者从存储装置608被安装，或者从rom 602被安装。在该计算机程序被处理装置601执行时，执行本公开实施例的方法中限定的上述功能。
166.需要说明的是，本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、光纤、便携式紧凑磁盘只读存储器(cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本
公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、rf(射频)等等，或者上述的任意合适的组合。
167.在一些实施方式中，客户端、服务器可以利用诸如http(hypertext transfer protocol，超文本传输协议)之类的任何当前已知或未来研发的网络协议进行通信，并且可以与任意形式或介质的数字数据通信(例如，通信网络)互连。通信网络的示例包括局域网(“lan”)，广域网(“wan”)，网际网(例如，互联网)以及端对端网络(例如，ad hoc端对端网络)，以及任何当前已知或未来研发的网络。
168.上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。
169.上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：获取样式表对应的源文件，其中，所述源文件中的代码为基于css扩展语言编写的；基于所述源文件对应的代码类型，确定所述源文件中的目标变量信息，其中所述目标变量信息包含目标变量以及所述目标变量之间的关联关系；基于所述目标变量之间的关联关系对所述源文件进行编译，获得所述源文件对应的css文件和映射文件，其中，所述css文件中包含每一所述目标变量对应的css变量，所述映射文件中包含所述css变量之间的映射关系。
170.或者，上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：响应于目标应用程序中选择的目标样式，获得所述目标样式下各个css变量的目标取值，其中所述目标应用程序的代码文件中包含css文件和映射文件，所述css文件和所述映射文件是基于上文所述的css编译方法编译生成的；针对所述目标样式下的每一css变量，将所述css文件中与该css变量对应的取值更新为所述目标取值；针对所述目标样式下的每一css变量，根据所述css变量的目标取值和所述映射文件，确定所述css文件中与所述css变量关联的关联css变量的更新取值，并将所述css文件中所述关联css变量的取值更新为所述更新取值。
171.可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括但不限于面向对象的程序设计语言—诸如java、smalltalk、c ，还包括常规的过程式程序设计语言——诸如“c”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(lan)或广域网(wan)——连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
172.附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代
表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
173.描述于本公开实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，模块的名称在某种情况下并不构成对该模块本身的限定，例如，第一获取模块还可以被描述为“获取样式表对应的源文件的模块”。
174.本文中以上描述的功能可以至少部分地由一个或多个硬件逻辑部件来执行。例如，非限制性地，可以使用的示范类型的硬件逻辑部件包括：现场可编程门阵列(fpga)、专用集成电路(asic)、专用标准产品(assp)、片上系统(soc)、复杂可编程逻辑设备(cpld)等等。
175.在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(ram)、只读存储器(rom)、可擦除可编程只读存储器(eprom或快闪存储器)、光纤、便捷式紧凑盘只读存储器(cd-rom)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
176.根据本公开的一个或多个实施例，示例1提供了一种css编译方法，其中，所述方法包括：
177.获取样式表对应的源文件，其中，所述源文件中的代码为基于css扩展语言编写的；
178.基于所述源文件对应的代码类型，确定所述源文件中的目标变量信息，其中所述目标变量信息包含目标变量以及所述目标变量之间的关联关系；
179.基于所述目标变量之间的关联关系对所述源文件进行编译，获得所述源文件对应的css文件和映射文件，其中，所述css文件中包含每一所述目标变量对应的css变量，所述映射文件中包含所述css变量之间的映射关系。
180.根据本公开的一个或多个实施例，示例2提供了示例1的方法，其中，所述基于所述源文件对应的代码类型，确定所述源文件中的目标变量信息，包括：
181.根据所述源文件对应的代码类型的语言规则，提取所述源代码中的目标变量的变量名称；
182.根据所述源文件对应的抽象语法树和所述目标变量，确定所述目标变量之间的关联关系。
183.根据本公开的一个或多个实施例，示例3提供了示例1的方法，其中，所述基于所述目标变量之间的关联关系对所述源文件进行编译，获得所述源文件对应的css文件和映射
文件，包括：
184.基于css对应的样式表规则和所述目标变量，生成每一所述目标变量对应的css变量；
185.根据所述目标变量之间的关联关系，确定每一所述css变量的取值以添加至所述css文件中；
186.根据所述目标变量之间的关联关系，生成所述目标变量对应的css变量之间的映射关系，并将所述映射关系和所述css变量映射存储至所述映射文件。
187.根据本公开的一个或多个实施例，示例4提供了示例1的方法，其中，所述源代码中还包括应用所述目标变量的样式定义；
188.所述基于目标变量之间的关联关系对所述源文件进行编译，获得所述源文件对应的css文件和映射文件，包括：
189.针对所述源代码中的所述样式定义，将所述样式定义中的目标变量替换为所述目标变量对应的css变量的引用函数，获得css样式定义，并将所述css样式定义添加至css文件中。
190.根据本公开的一个或多个实施例，示例5提供了示例4的方法，其中，所述基于目标变量之间的关联关系对所述源文件进行编译，获得所述源文件对应的css文件和映射文件，还包括：
191.若获得的所述css样式定义中的标签对应的css变量的引用函数为多个，则基于所述标签对应的css的样式表规则生成多个子标签；
192.根据每一所述子标签对应的css的样式表规则和所述标签对应的多个css变量的引用函数，确定每一所述子标签对应的css变量的引用函数；
193.将所述css样式定义中所述标签和所述标签对应的css变量的引用函数替换为所述每一子标签和所述子标签对应的css变量的引用函数，获得更新后的css文件。
194.根据本公开的一个或多个实施例，示例6提供了示例1的方法，其中，所述css扩展语言为less语言或scss语言，所述映射文件为json文件。
195.根据本公开的一个或多个实施例，示例7提供了一种css样式更新方法，其中，所述方法包括：
196.响应于目标应用程序中选择的目标样式，获得所述目标样式下各个css变量的目标取值，其中所述目标应用程序的代码文件中包含css文件和映射文件，所述css文件和所述映射文件是基于示例1-6中任一项所述的css编译方法编译生成的；
197.针对所述目标样式下的每一css变量，将所述css文件中与该css变量对应的取值更新为所述目标取值；
198.针对所述目标样式下的每一css变量，根据所述css变量的目标取值和所述映射文件，确定所述css文件中与所述css变量关联的关联css变量的更新取值，并将所述css文件中所述关联css变量的取值更新为所述更新取值。
199.根据本公开的一个或多个实施例，示例8提供了一种css编译装置，其中，所述装置包括：
200.第一获取模块，用于获取样式表对应的源文件，其中，所述源文件中的代码为基于css扩展语言编写的；
201.确定模块，用于基于所述源文件对应的代码类型，确定所述源文件中的目标变量信息，其中所述目标变量信息包含目标变量以及所述目标变量之间的关联关系；
202.编译模块，用于基于所述目标变量之间的关联关系对所述源文件进行编译，获得所述源文件对应的css文件和映射文件，其中，所述css文件中包含每一所述目标变量对应的css变量，所述映射文件中包含所述css变量之间的映射关系。
203.根据本公开的一个或多个实施例，示例9提供了一种css样式更新装置，其中，所述装置包括：
204.第二获取模块，用于响应于目标应用程序中选择的目标样式，获得所述目标样式下各个css变量的目标取值，其中所述目标应用程序的代码文件中包含css文件和映射文件，所述css文件和所述映射文件是基于示例1-6中任一项所述的css编译方法编译生成的；
205.第一更新模块，用于针对所述目标样式下的每一css变量，将所述css文件中与该css变量对应的取值更新为所述目标取值；
206.第二更新模块，用于针对所述目标样式下的每一css变量，根据所述css变量的目标取值和所述映射文件，确定所述css文件中与所述css变量关联的关联css变量的更新取值，并将所述css文件中所述关联css变量的取值更新为所述更新取值。
207.根据本公开的一个或多个实施例，示例10提供了一种计算机可读介质，其上存储有计算机程序，该程序被处理装置执行时实现示例1-7中任一示例所述方法的步骤。
208.根据本公开的一个或多个实施例，示例11提供了一种电子设备，包括：
209.存储装置，其上存储有计算机程序；
210.处理装置，用于执行所述存储装置中的所述计算机程序，以实现示例1-7中任一示例所述方法的步骤。
211.以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开中所涉及的公开范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述公开构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。
212.此外，虽然采用特定次序描绘了各操作，但是这不应当理解为要求这些操作以所示出的特定次序或以顺序次序执行来执行。在一定环境下，多任务和并行处理可能是有利的。同样地，虽然在上面论述中包含了若干具体实现细节，但是这些不应当被解释为对本公开的范围的限制。在单独的实施例的上下文中描述的某些特征还可以组合地实现在单个实施例中。相反地，在单个实施例的上下文中描述的各种特征也可以单独地或以任何合适的子组合的方式实现在多个实施例中。
213.尽管已经采用特定于结构特征和/或方法逻辑动作的语言描述了本主题，但是应当理解所附权利要求书中所限定的主题未必局限于上面描述的特定特征或动作。相反，上面所描述的特定特征和动作仅仅是实现权利要求书的示例形式。关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。