Rails 3.1에서 조건부 CSS 렌더링을 어떻게 구현할 수 있나요?

Rails 3.1의 조건부 CSS 렌더링

Rails 3.1 자산 파이프라인은 CSS 파일을 포함한 정적 자산을 관리하기 위한 강력한 메커니즘을 제공합니다. 그러나 특정 기준에 따라 조건부로 CSS를 렌더링하는 것은 어려운 작업일 수 있습니다.

기본 접근 방식

기본적으로 *= require_tree 명령에는 자산/스타일시트 디렉토리. 이 접근 방식은 크기가 크고 읽을 수 없는 CSS 번들로 이어질 수 있습니다.

개별 파일 포함

해결 방법으로 application.css에서 각 CSS 파일을 개별적으로 수동으로 지정할 수 있습니다. 명백한. 이 방법은 더 세밀한 제어를 제공하지만 지루하고 유연성이 없을 수 있습니다.

더 스마트한 솔루션

더 우아한 솔루션은 별도의 매니페스트 파일을 사용하여 CSS 요구 사항을 다음과 같이 분류하는 것입니다. 논리적 그룹. 이 접근 방식을 사용하면 수동으로 편집할 필요 없이 새 스타일시트를 자동으로 추가할 수 있습니다.

1단계: 자산 구조 재구성

앱/자산/스타일시트 폴더 재구성으로 시작하세요. 다음 구조로 변환합니다.

• all: 기본 스타일시트와 모든 스타일시트에 적용되는 스타일시트를 포함합니다. views.
• print: 인쇄 관련 스타일시트를 포함합니다.
• 예: Internet Explorer 브라우저 관련 스타일시트를 포함합니다.
• application-all.css: 모든 항목을 포함하는 매니페스트 파일 "all" 디렉토리 내의 CSS 파일.
• application-print.css: "print" 디렉토리 내의 모든 CSS 파일을 포함하는 매니페스트 파일 디렉토리.
• application-ie.css: "ie" 디렉토리 내의 모든 CSS 파일을 포함하는 매니페스트 파일.

2단계: 매니페스트 파일 편집

다음으로 표시된 대로 3개의 매니페스트 파일을 편집합니다. 아래:

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

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

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

3단계: 애플리케이션 레이아웃 업데이트

새 매니페스트 파일을 포함하도록 애플리케이션 레이아웃을 수정하세요.

<%= 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]-->

4단계: 프로덕션 환경 구성

새 매니페스트 추가 파일을 config/environments/production.rb에 추가하세요:

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

이미지 참조에 대한 참고 사항

이 조건부 렌더링 접근 방식은 스타일시트 내의 이미지 참조에 영향을 미칠 수 있다는 점에 유의하세요. . 적절한 이미지 로드를 보장하려면 동일한 폴더 구조를 따르도록 이미지를 이동하거나, 이미지 경로를 한정하거나, SASS 도우미 image-url('image.png')을 사용할 수 있습니다.

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