# 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。