样式面板可以几乎只需鼠标拖拉拽就可以对页面进行可视化设计,并在对应选择器下生成CSS。
样式面板支持各种常见的样式可视化操作,对于少量还未支持的CSS语法(如calc()函数)可以直接在CSS栏中编写,两边操作是等效的。
基本操作请观看右侧教学视频。
如果不设置任何选择器时进行的可视化设计生成的CSS是以当前动态id作为选择器的,生成CSS在CSS栏的组件
中查看,也可以直接在那里添加各种伪类,如:after
, :active
等。
对于复杂的、长久运营的项目应优先考虑设置有意义的选择器。通常是先给当前组件写个类名,再在CSS栏的页面
中写个能选中当前组件的选择器,回到样式面板就可以在此选择器下进行可视化设计了。
如果使用了共享
组件,也可以在共享组件的CSS栏中设置选择器,那就会在此共享组件中生成CSS并作用到所有使用到此共享组件的页面中。
CSS变量可分成4种类型
color:颜色
unit:带有单位的值,如width: 9px
number:不带单位的值,如opacity: 0.8
text:非数值,如cursor: pointer
设置好CSS变量后再随后的可视化设计时就可以选用。