# Horizon 　　其对应的文件路径为： horizon\openstack_dashboard\static\dashboard\scss\horizon.scss。其分别引入了：Horizon Variables、Horizon Mixins、Horizon Util、Vendor Components、Layout、Dashboard Components、Framework、Contrib stuff、Legacy、Debt。下面分别对其进行分析。 ## 1. Horizon Variables 　　其对应的文件路径为：horizon\openstack_dashboard\static\dashboard\scss\_variables.scss。这里面的内容包括：引入 Bootstrap Helper Variables、定义$static_url、定义Horizon Custom Variables 、Resource Browser、Font-awesome、Charts、Responsive Table、Tooltip、Magic Search 和 Member lists。都是定义一些CSS变量。 ## 2. Horizon Mixins 　　其对应的文档路径为： horizon\openstack_dashboard\static\dashboard\scss\_mixins.scss。里面定义了几个CSS的变量。这里参考的是SCSS mixins ，如果想了解更多，可以阅读其官方文档： [Sass Basics](http://www.sass-lang.com/guide#topic-6)。 ## 3. Horizon Util 　　其对应的文档路径为：horizon\openstack_dashboard\static\dashboard\scss\_util.scss。引入了bootstrap/mixins 和定义一些CSS样式。 ## 4. Vendor Components 　　这里引入第三方组件：bootstrap 和 font-awesome。这两个文件在是放在文件夹 horizon\static\horizon\lib 下。这两个组件经常用，就不多说了。 ## 5. Layout 　　其对应的文件路径为： horizon/openstack_dashboard/static/dashboard/scss/_layout.scss， 它定义了一些总体布局的样式。 ## 6. Dashboard Components 　　这里是其主题的核心部分，其引入的组件样式分别为：bar_charts、breadcrumbs、charts、checkboxes、checkboxes、datepicker、dl_lists、dropdowns、forms、help_panel、icons、inline_edit、loader、login、membership、messages、modals、navbar、network_topology、network_topology_svg、pie_charts、progress_bars、quota、radiobuttons、resource_browser、resource_topology、selection_menu、selects、sidebar、tables、transfer_tables、wizard。 　　这里面的文件对应的样式都不多，主要是一些修改之类的。 ## 7. Framework 　　其文件路径为： horizon\horizon\static\framework\framework.scss。其里面引入了widgets/widgets。这里面又分别引入了：headers/headers、table/table、charts/chart-tooltip、charts/pie-chart、action-list/action-list、modal-wait-spinner/modal-wait-spinner、metadata/metadata、magic-search/magic-search、table/hz-dynamic-table。 　　其定义的对应的相关样式。这些文件夹里包含了js,html文件，其是基于angularJS来写的。 ## 8. Contrib stuff 　　其文件路径为： horizon\openstack_dashboard\static\dashboard\scss\_contrib.scss。里面就定义了一个样式：.small-padding。 ## 9. Legacy 　　其文件路径为： horizon\openstack_dashboard\static\dashboard\scss\_legacy.scss。里面是直接定义样式的。 ## 10. Debt 　　其文件路径为：horizon\openstack_dashboard\static\dashboard\scss\_debt.scss。