[html] 트위터 부트 스트랩으로 작업하는 HTML 이메일을받은 사람이 있습니까?

내가 생각 해낸 가장 좋은 방법은 필요한 경우 부트 스트랩 (또는 기타) 스타일을 이메일로 가져 오기 위해 선택한 기준으로 Sass 가져 오기를 사용하는 것입니다.

먼저 email.scss이메일 스타일 과 같은 새로운 scss 상위 파일을 만듭니다 . 다음과 같이 보일 수 있습니다.

    // Core variables and mixins
    @import "css/main/ezdia-variables";

    @import "css/bootstrap/mixins";
    @import "css/main/ezdia-mixins";

    // Import base classes
    @import "css/bootstrap/scaffolding";
    @import "css/bootstrap/type";
    @import "css/bootstrap/buttons";
    @import "css/bootstrap/alerts";

    // nest conflicting bootstrap styles
    .bootstrap-style {
        //use single quotes for nested imports
        @import 'css/bootstrap/normalize';
        @import 'css/bootstrap/tables';
    }

    @import "css/main/main";

    // Main email classes
    @import "css/email/zurb";
    @import "css/email/main";

그런 다음 이메일 템플릿에서 컴파일 된 email.css 파일 만 참조합니다. 여기에는 email.scss에서 올바르게 참조되고 중첩 된 선택된 부트 스트랩 스타일 만 포함됩니다.

예를 들어 특정 부트 스트랩 스타일은 Zurb의 반응 형 테이블 스타일과 충돌합니다. 이를 수정하려면 필요한 경우에만 부트 스트랩의 테이블 스타일을 호출하기 위해 부트 스트랩의 스타일을 상위 클래스 또는 다른 선택기에 중첩 할 수 있습니다.

이렇게하면 필요할 때만 클래스를 가져올 수있는 유연성이 있습니다. 사용할 http://zurb.com/수있는 훌륭한 반응 형 이메일 라이브러리를 사용하는 것을 볼 수 있습니다. 또한보십시오http://zurb.com/ink/

마지막으로, https://github.com/fphilipe/premailer-rails3위에서 언급 한 것과 같은 프리 메일러를 사용 하여 스타일을 인라인 CSS로 처리하고 인라인 스타일을 특정 이메일 템플릿에서 사용되는 것만으로 컴파일합니다. 예를 들어, 프리 메일러의 경우 루비 파일은 이메일을 인라인 스타일로 컴파일하기 위해 다음과 같이 보일 수 있습니다.

    require 'rubygems' # optional for Ruby 1.9 or above.
    require 'premailer'

    premailer = Premailer.new('http://www.yourdomain.com/TestSnap/view/emailTemplates/DeliveryReport.jsp', :warn_level => Premailer::Warnings::SAFE)

    # Write the HTML output
    File.open("delivery_report.html", "w") do |fout|
      fout.puts premailer.to_inline_css
    end

    # Write the plain-text output
    File.open("output.txt", "w") do |fout|
      fout.puts premailer.to_plain_text
    end

    # Output any CSS warnings
    premailer.warnings.each do |w|
      puts "#{w[:message]} (#{w[:level]}) may not render properly in #{w[:clients]}"
    end

도움이 되었기를 바랍니다! Pardot, Salesforce 및 당사 제품에 내장 된 자동 응답 및 일일 이메일 전반에 걸쳐 유연한 이메일 템플릿 프레임 워크를 찾는 데 어려움을 겪었습니다.