Sprocket을 사용하여 Rails 3.1에서 조건부 CSS 포함을 어떻게 구현할 수 있습니까?

Sprocket을 사용하는 Rails 3.1의 조건부 자산 포함

CSS 렌더링을 최적화하는 과정에서 많은 개발자가 CSS를 선택적으로 포함하는 문제로 어려움을 겪습니다. 특정 조건에 따라 파일을 생성합니다. 이 문제는 반응형 레이아웃을 처리하거나 브라우저 간 호환성을 보장할 때 관련이 있습니다.

Rails 3.1에서 자산 파이프라인은 정적 자산 관리를 위한 강력한 메커니즘을 제공합니다. 기본적으로 application.css의 *= require_tree 명령에는 자산/스타일시트 디렉터리 내의 모든 파일이 포함됩니다. 그러나 이 접근 방식은 CSS 파일을 조건부로 포함하는 데 충분하지 않을 수 있습니다.

전통적이지만 투박한 솔루션

한 가지 해결 방법은 그림과 같이 각 CSS 파일을 수동으로 지정하는 것입니다.

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

이 방법은 효과가 있지만 CSS 파일 수에 비해 실용성이 떨어집니다. 증가합니다.

별도의 매니페스트 및 정리된 폴더 활용

자산/스타일시트 폴더를 재구성하고 별도의 매니페스트 파일을 사용하는 것이 더 우아한 솔루션입니다.

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 )

이미지 참조

이 구조에서는 이미지 참조를 다룰 때 주의가 필요합니다. 한 가지 잠재적인 해결책은 그에 따라 이미지를 이동하여 CSS 파일과 일관된 구성을 보장하는 것입니다. 또는 이미지 경로를 한정하거나 이미지 URL에 SASS 도우미를 활용할 수도 있습니다.

위 내용은 Sprocket을 사용하여 Rails 3.1에서 조건부 CSS 포함을 어떻게 구현할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!