Shopify Theme with Compass and Sass

Question

Có ai có quy trình làm việc để phát triển các chủ đề Shopify bằng La bàn và Sass không? Tôi thực sự gần gũi, tôi chỉ cần tìm ra cách để không làm cho Sass barf trên các thẻ CSS lỏng.

Đây là những gì tôi đã có:

• Một dự án sass/la bàn trong thư mục (ví dụ :, "/ newwebsite /)
• Một thư mục con chứa theme Shopify của tôi ("/newwebsite/newwebsite-theme/")
• Một Compass config.rb trỏ css, _dir images_dir và javascripts_dir tất cả vào thư mục tài sản họ của ("/newwebsite/newwebsite-theme/tài sản/")
• Compass xem trên
• shopify_theme đá quý cũng theo dõi, file theme tải lên Shopify (https://github.com/Shopify/shopify_theme)
• EDIT Sass interpolations (xem Anser dưới đây)
• EDIT Compass callback để đổi tên để .css.liquid

Vấn đề : Compass barf khi bạn cần sử dụng các thẻ khuôn mẫu chất lỏng của Shopify, ví dụ: hình nền - ví dụ, nền: url ("{{" splash-1.jpg "| asset_url}} ")

Có ai biết cách hướng dẫn Compass/Sass nhổ ra các thẻ mẫu chất lỏng khi chúng vào CSS không? Nếu có, thì tôi có một luồng công việc vững chắc để chỉnh sửa Sass cục bộ và thực hiện những thay đổi trong giây lát sau khi vào cửa hàng Shopify

Cảm ơn

EDIT:. Bằng cách sử dụng câu trả lời Hopper dưới đây cho các thẻ lỏng trong Sass, và đổi tên tập tin đầu ra Compass .css để .css.liquid, bây giờ tôi có một quy trình làm việc tức thời để thiết kế một chủ đề Shopify với Compass và Sass! Đây là mã cho cuộc gọi lại của La bàn có trong config.rb:

on_stylesheet_saved do |filename| 
    s = filename + ".liquid" 
    puts "copying to: " + s 
    FileUtils.cp(filename, s) 
    puts "removing: " + filename 
end 

Answer 1

Tôi không quen với Shopify hoặc thẻ chất lỏng, nhưng tôi biết rằng trong SASS, bạn có thể sử dụng interpolations để xuất CSS thuần túy. Ví dụ, Sass đây:

.test { 
    background: url(#{'{{ "splash-1.jpg" | asset_url }}'}) 
} 

sẽ được biên dịch để:

.test { 
    background: url({{ "splash-1.jpg" | asset_url }}); } 

Liệu rằng giúp bạn có được gần với những gì bạn đang tìm kiếm?

Answer 2

Làm thế nào để bạn giữ cho La bàn không bị chặn lại trên logic lỏng giữa các thuộc tính? Ví dụ. bất cứ lúc nào có một tuyên bố về chất lỏng if Tôi gặp lỗi và việc sử dụng #{'...'} dường như không hữu ích.

Đây là một thử nghiệm tôi không thể có được để làm việc:

#container { 
    width:884px; 
    margin:0px auto; 
    min-height:500px; 
    position:relative; 
    padding:0 40px; 
    {% if settings.page_bg_transparent %} 
    background:transparent; 
    {% else %} 
    background:{{ settings.page_bg_color }}; 
    {% endif %} 
} 

CẬP NHẬT thật là thú vị, bình luận lôgic lỏng hoạt động:

#container { 
    width:884px; 
    margin:0px auto; 
    min-height:500px; 
    position:relative; 
    padding:0 40px; 
    /* {% if settings.page_bg_transparent %} */ 
    background:transparent; 
    /* {% else %} */ 
    background:#{'{{ settings.page_bg_color }}'}; 
    /* {% endif %} */ 
} 

Answer 3

Đối url tài sản bạn cũng có thể sử dụng SCSS custom functions. Đặt này trong config.rb bạn tập tin

module Sass::Script::Functions 
    def shopify_image_url(string) 
    assert_type string, :String 
    Sass::Script::String.new("url({{'#{string.value}' | asset_url}})") 
    end 
end 

Và sau đó sử dụng nó trong bạn styles.scss như thế này

background: shopify_image_url('image.png'); 

Answer 4

này làm việc cho tôi, một phần - tuy nhiên tôi thấy rằng các Ứng dụng Shopify Theme rất nhiều lần không muốn tải lên tệp .css.liquid đã chỉnh sửa của tôi, bởi vì dường như nó không nhận ra rằng tệp đã được chỉnh sửa.

gì giải quyết nó cho tôi là sử dụng đoạn mã sau vào config.rb của tôi, thay vì các mã trong câu hỏi trên:

on_stylesheet_saved do |filename| 
    move_to = filename + ".liquid" 
    puts "Moving from #{filename} to #{move_to}" 
    FileUtils.mv(filename, move_to) 
end 

Answer 5

tôi thấy nó hữu ích để loại bỏ các tập tin đầu ra ban đầu sau khi tiết kiệm rất bạn không có tập tin thừa, không lỏng đó trong thư mục tài sản.

on_stylesheet_saved do |filename| 
    s = filename + ".liquid" 
    puts "copying to: " + s 
    FileUtils.cp(filename, s) 
    puts "removing: " + filename 
    FileUtils.remove_file(filename) 
end 

Answer 6

Xây dựng về câu trả lời của phễu, cho bất cứ ai sử dụng autoprefixer để xử lý đầu ra sass, bạn sẽ cần phải thêm một cặp thêm dấu ngoặc kép vì phân tích cú pháp url({{ ... }}) nguyên nhân autoprefixer để nghẹt thở.

Làm điều này:

background: url("#{'{{ "splash-1.jpg" | asset_url }}'}") 

nào trở thành này trong *.css.liquid file:

background: url('{{ "splash-1.jpg" | asset_url }}') 

Answer 7

Nếu bạn muốn giữ phần mở rộng ".scss.liquid" cho việc sử dụng kiểm tra đáp ứng mới:

on_stylesheet_saved do |filename| 
    FileUtils.mv filename, "#{File.dirname(filename)}/#{File.basename(filename,'.*')}.scss.liquid" 
end 

Đổi tên tệp thay vì sao chép rồi xóa.

Answer 8

Tôi đã viết một bài viết mô tả các phương pháp tôi đã sử dụng để giúp Compass và Sass làm việc tốt với Shopify. Đây là cách tiếp cận tương tự của câu trả lời của DOMUSNETWORK. Tôi đi vào chi tiết hơn một chút về cấu trúc tập tin.

http://www.mealeydev.com/blog/shopify-and-sass/

Answer 9

Shameless plug ...

Tôi nghĩ @nick là đi đúng hướng.

scss tốt hơn khi được biên dịch trước khi gửi tới Shopify.

Đối với những người khác tìm thấy câu trả lời này, tôi nghĩ Quickshot là công cụ bạn đang tìm kiếm.

Bạn vẫn sẽ cần phải nội suy cho url nội dung, nhưng ảnh chụp nhanh sẽ tự động biên dịch lại scss của bạn và tải lên kết quả để shopify trong một bước. Mà cũng cung cấp cho bạn khả năng sử dụng @include trong các tệp scss của bạn.

http://quickshot.io/

https://github.com/internalfx/quickshot