2014-01-06 55 views
2

如何在rails項目中將命名空間添加到css中。Rails中的Css命名空間

我有2個預定義的CSS文件和2個應用程序佈局,我想第一個使用1個CSS和另一個第二個。我的CSS文件具有相同類的樣式,所以如果我不能以某種方式將它們分開,就會混淆在一起。

我的一個控制器使用管理員名稱空間。 我試圖將第一個CSS複製到一個管理文件夾,但它似乎不工作。

文件夾結構:

stylesheets\admin\screen.css 
      \styles.css 

views\layouts\application.html.haml 
      \aplication2.html.haml 

--- UPDDATE ---

aplication.html.haml:

%html 
%head 
%title Page 
= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true 
= javascript_include_tag "application", "data-turbolinks-track" => true 
= csrf_meta_tags 
= favicon_link_tag 'favicon.ico' 
%body 
    .wrapper 
    .page 
    .header-container 
     .header 
     .quick-access 
      %form#search_mini_form{action: "product_list.html", method: "get"} 
      .form-search 
       %label{for: "search"} Search: 
       %input#search.input-text{maxlength: "128", name: "q", type: "text", value: ""}/ 
       %button.button{title: "Search", type: "submit"} 
       %span 
        %span Search 
      %p.welcome-msg Default welcome msg! 
      %ul.links 
      %li.first 
       %a{href: "dashboard.html", title: "My Account"} My Account 
      %li 
       %a.top-link-cart{href: "cart.html", title: "My Cart"} My Cart 
      %li.last 
       %a.top-link-checkout{href: "checkout.html", title: "Checkout"} Checkout 
    .nav-container 
     %ul#nav 
     - @categories.each do |cat| 
      %li.level0.nav-1.level-top.first 
      %a.level-top{href: "#"} 
       %span=cat.label 
     = yield 
    .col-left.sidebar 
     .col-right.sidebar 
     .block.block-cart 
      .block-title 
      %strong 
       %span My Cart 
      .block-content 
      %p.empty You have no items in your shopping cart. 
    .footer-container 
    .footer 
     %ul 
     %li 
      %a{href: "#"} About Us 
     %li 
      %a{href: "#"} Customer Service 
     %li.last.privacy 
      %a{href: "#"} Privacy Policy 
     %ul.links 
     %li.first 
      %a{href: "#", title: "Site Map"} Site Map 
     %li 
      %a{href: "#", title: "Search Terms"} Search Terms 
     %li 
      %a{href: "#", title: "Orders and Returns"} Orders and Returns 
     %li.last 
      %a{href: "#", title: "Contact Us"} Contact Us 

如果我改變= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true= stylesheet_link_tag "admin/screen.css", media: "all", "data-turbolinks-track" => true所有的風格都將丟失。

回答

2

在您的應用程序模板一個放 -

<%= stylesheet_link_tag "admin/screen", :media => "all" %> 

,並在其他認沽 -

<%= stylesheet_link_tag "styles", :media => "all" %> 

如果你最終調用application.css文件到這兩個模板,你會看到它在整個樹中調用 -

/* 
*= require_self 
*= require_tree . 
*/ 

這會在每個現有樣式表中調用佈局。您只需要更具體地將哪些樣式表調入應用程序。

============== UPDATE ==============

由於您使用Rails 4和HAML你替換的行會看這樣的 - 用正確的模板相應課程的

= stylesheet_link_tag "admin/screen", media: "all", "data-turbolinks-track" => true 

= stylesheet_link_tag "styles", media: "all", "data-turbolinks-track" => true 

============另一個更新===========

假設你有額外的樣式表,你想在每個模板你可以包括通過用逗號分隔名稱來包含它們。請參見下面的例子 -

= stylesheet_link_tag "styles", "another-stylesheet", "and-another-one" media: "all", "data-turbolinks-track" => true 
+0

,所以我應該替換這些行:= stylesheet_link_tag「應用程序」,媒體說:「所有」,「數據turbolinks軌道」 =>真正的你寫的人? – LogofaT

+0

@LogofaT - 檢查我的更新回答 –

+0

是的,這正是我所嘗試過的,如果我刪除了原來的行,所有的CSS都丟失了 – LogofaT