Trong HAML trên Ruby on Rails, cách sử dụng bộ lọc: sass?

Question

Nếu sử dụng HAML trên Ruby on Rails, sau đó

:sass 
    #someDiv 
    border: 3px dashed orange 

sẽ không có bất kỳ <style> thẻ xung quanh họ.

và sau đó

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

sẽ không đá trên bộ lọc :sass, nhưng

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

sẽ đá trên bộ lọc :sass, nhưng nó là bên ngoài của thẻ <style>. Vậy làm cách nào để sử dụng bộ lọc :sass? Chúng ta có thể tự bọc <style> xung quanh nó, nhưng nó không phải là sử dụng phổ biến mà chúng ta muốn tạo css từ sass nhưng không phải trong thẻ <style> trong một tệp HAML.

Answer 1

Tài liệu liên quan đến câu hỏi của bạn là here tại haml-lang.com và giải thích chi tiết hơn tại sass-lang.com.

Tôi tin rằng những gì bạn đang bỏ lỡ là không nên sử dụng hàm sass trong các tệp haml của bạn. Chúng phải được đặt trong công khai/stylesheets/sass với phần mở rộng .sass. Chúng sẽ được biên dịch thành tệp .css ở dạng công khai/biểu định kiểu, sau đó bạn liên kết với bố cục của mình.

Từ liên kết sas-lang.com:

Ví dụ, công/stylesheets/sass/main.scss sẽ được biên dịch cho công chúng/stylesheets/main.css.

Sau đó bạn sẽ sử dụng stylesheet_link_tag helper (hoặc liên kết các stylesheet bằng tay):

<%= style_sheet_link_tag 'main' %> 

Nếu bạn thực sự cần phải sử dụng sass trong Haml, here là câu trả lời. Bạn không thể lồng các bộ lọc trong haml. Bạn dường như cần phải làm điều gì đó như thế này:

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

Tôi tin rằng this là phản hồi ban đầu từ nhóm google.

Answer 2

Bạn cũng có thể viết bộ lọc tùy chỉnh để tạo thẻ kiểu.

Ví dụ dưới đây xác định bộ lọc ': csass' mới.

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 

Vì vậy, bạn có thể làm điều đó như thế này :)

:csass 
    #someDiv 
    border: 3px dashed orange 

Answer 3

Since 4.0.0,

Bộ lọc :sass nay kết thúc tốt đẹp sản lượng của nó trong một thẻ phong cách, cũng như mới :less và :scss bộ lọc.

Trước 4.0.0, chỉ cần bọc nó trong %style:

%style 
    :sass 
    // so sassy! ;)