[css] 특정 CSS를 조건부로 사용하기 위해 Rails 3.1 자산 파이프 라인 사용

Program / 글쓴이

Rails 3.1.rc5를 사용하여 첫 번째 Solo Rails 앱을 구축하는 중입니다. 내 문제는 내 사이트가 다양한 CSS 파일을 조건부로 렌더링하도록하고 싶다는 것입니다. Blueprint CSS를 사용하고 있으며 인쇄 할 때와 Internet Explorer에서 사이트에 액세스 할 때만 스프로킷 / 레일을 screen.css대부분 렌더링하려고합니다 .print.cssie.css

불행하게도, 매니페스트 의 기본 *= require_tree명령 application.css은 assets/stylesheets디렉토리의 모든 것을 포함 하고 불쾌한 CSS 혼란을 초래합니다. 현재 해결 방법은 모든 것을 개별적으로 지정하는 일종의 무차별 방법입니다.

application.css에서 :

*= require_self
*= require home.css
...
*= require blueprint/screen.css

내 스타일 시트에서 부분 (haml) :

<!--[if lt IE 9]
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
![endif]-->
= stylesheet_link_tag "application"
= stylesheet_link_tag 'blueprint/print', media: 'print'
<!--[if lt IE8]]
= stylesheet_link_tag 'blueprint/ie'
![endif]-->
= javascript_include_tag "application"

이것은 작동하지만 특히 예쁘지는 않습니다. 나는 심지어 이것을 얻기 위해 몇 시간 동안 검색을 해 왔지만 방금 놓친 더 쉬운 방법이 있기를 바라고 있습니다. 하위 디렉토리를 포함하지 않고 특정 디렉토리를 선택적으로 렌더링 할 수 있다면 전체 프로세스가 훨씬 덜 엄격 해집니다.

감사!

답변

자산 파이프 라인을 사용하면서 스타일 시트를 그룹화하여 덜 견고하고 미래의 증거를 만드는 방법을 발견했습니다. 솔루션보다 훨씬 간단하지는 않지만이 솔루션을 사용하면 전체 구조를 다시 편집하지 않고도 새 스타일 시트를 자동으로 추가 할 수 있습니다.

원하는 것은 별도의 매니페스트 파일을 사용하여 문제를 해결하는 것입니다. 먼저 app/assets/stylesheets폴더 를 다시 구성해야 합니다.

app/assets/stylesheets
+-- all
    +-- your_base_stylesheet.css
+-- print
    +-- blueprint
        +-- print.css
    +-- your_print_stylesheet.css
+-- ie
    +-- blueprint
        + ie.css
    +-- your_ie_hacks.css
+-- application-all.css
+-- application-print.css
+-- application-ie.css

그런 다음 세 개의 매니페스트 파일을 편집합니다.

/**
 * application-all.css
 *
 *= require_self
 *= require_tree ./all
 */

/**
 * application-print.css
 *
 *= require_self
 *= require_tree ./print
 */

/**
 * application-ie.css
 *
 *= require_self
 *= require_tree ./ie
 */

다음으로 애플리케이션 레이아웃 파일을 업데이트하십시오.

<%= stylesheet_link_tag "application-all", :media => "all" %>
<%= stylesheet_link_tag "application-print", :media => "print" %>

<!--[if lte IE 8]>
    <%= stylesheet_link_tag "application-ie", :media => "all" %>
<![endif]-->

마지막으로,이 새로운 매니페스트 파일을 config / environments / production.rb에 포함시키는 것을 잊지 마십시오 :

config.assets.precompile += %w( application-all.css application-print.css application-ie.css )

최신 정보:

Max가 지적 했듯이이 구조를 따르면 이미지 참조를 염두에 두어야합니다. 몇 가지 선택 사항이 있습니다.

  1. 동일한 패턴을 따르도록 이미지 이동
    • 이미지가 모두 공유되지 않은 경우에만 작동합니다.
    • 나는 이것이 너무 복잡하기 때문에 이것이 초보자가 아닌 것으로 기대합니다.
  2. 이미지 경로를 규정하십시오.
    • background: url('/assets/image.png');
  3. SASS 도우미를 사용하십시오.
    • background: image-url('image.png');

답변

오늘이 문제를 겪었습니다.

모든 IE 특정 스타일 시트를 lib / assets / stylesheets에 넣고 IE 버전 당 하나의 매니페스트 파일을 만들었습니다. 그런 다음 application.rb에서 사전 컴파일 할 항목 목록에 추가하십시오.

config.assets.precompile += ["ie9.css", "ie7.css", "ie8.css", "ie.css"]

그리고 레이아웃에 조건부로 매니페스트 파일을 포함하면 좋습니다.

답변

그것을하는 아주 깔끔한 방법입니다. html 또는 modernizr에서 조건부 클래스를 사용합니다. 무엇을하는지에 대한 좋은 표현은이 기사를 참조하십시오.
modernizr-vs-conditional-classes-on-html

답변