2010-06-12 1 views
7

Wenn irgendein <style> Tag um sie herum nicht haben HAML auf Ruby on Rails, dannIn HAML auf Ruby on Rails, wie der Sass-Filter zu verwenden?

:sass 
    #someDiv 
    border: 3px dashed orange 

verwenden.

und dann

:css 
    :sass 
    #someDiv 
     border: 3px dashed orange 

kickt nicht auf den :sass Filter, aber

:css 
:sass 
    #someDiv 
    border: 3px dashed orange 

auf den :sass Filter treten, aber es ist außerhalb des <style>-Tages. Wie kann der :sass Filter verwendet werden? Wir können <style> manuell umschließen, aber es ist nicht üblich, dass wir css von sass, aber nicht innerhalb von <style> in einer HAML-Datei erzeugen wollen.

Antwort

12

Die Dokumentation zu Ihrer Frage ist here bei haml-lang.com und eine ausführlichere Erklärung über bei sass-lang.com.

Ich glaube, was Sie vermissen, ist, dass Sass nicht in Ihren haml-Dateien verwendet werden sollte. Sie sollten öffentlich/stylesheets/sass mit einer Erweiterung .sass platziert werden. Sie werden in einer .css-Datei in public/stylesheets kompiliert, die Sie dann in Ihr Layout einbinden.

Vom sas-lang.com Link:

Zum Beispiel public/stylesheets/sass/main.scss würde public/stylesheets/main.css zusammengestellt werden.

Sie würden dann mit dem stylesheet_link_tag Helfer (oder verknüpfen Sie die Stylesheet manuell):

<%= style_sheet_link_tag 'main' %> 

Wenn Sie wirklich sass verwenden müssen innerhalb haml, here ist die Antwort. Sie können Filter in haml nicht verschachteln. Sie müssen offenbar so etwas wie dies zu tun:

%style(type="text/css") 
    :sass 
    div 
     color: red 

Ich glaube this die ursprüngliche Antwort von dem haml Google Groups war.

+4

hm ... wenn sass nicht in einer haml Datei verwendet werden soll, dann wird die sass Filter sollen nicht bestanden haben? –

+0

Es hat seinen Nutzen, aber die Verwendung eines externen Stylesheets ist tendenziell wartungsfreundlicher und DRY. Referenz: http://stackoverflow.com/questions/1127927/is-using-the-style-attribute-frowned-upon – Awgy

+0

Sass/scss-Filter wäre zum Beispiel nützlich, 404, 422 und 500 als Seiten mit separatem Layout und Caching eingeschaltet, also bei der Bereitstellung einfach nur Seiten anfordern, um statische HTML-Dateien zu erhalten. Ich mag es einfach nicht einfach css zu schreiben. – tig

2

Sie können einen benutzerdefinierten Filter schreiben, um auch ein Style-Tag zu generieren.

Im folgenden Beispiel wird ein neuer Filter ": csass" definiert.

require "haml/filters" 
module Haml::Filters::Csass 
    include Haml::Filters::Base 
    include Haml::Filters::Sass 
    lazy_require 'sass/plugin' 
    def render(text) 
    src = super 
    "<style>#{src}</style>" 
    end 
end 

So können Sie es wie folgt :)

:csass 
    #someDiv 
    border: 3px dashed orange 
10

Since 4.0.0,

Der :sass Filter jetzt wickelt seinen Ausgang in einem Stil-Tag, wie auch die neue :less und :scss Filter.

Vor 4.0.0, wickeln Sie es nur in %style:

%style 
    :sass 
    // so sassy! ;)