2012-05-23 30 views
11

Tôi đang sử dụng Compass + Sass để quản lý/kết hợp các tệp .css của mình. Vì vậy, tôi có cấu trúc thư mục sau:Làm thế nào để làm cho Compass xem nhiều thư mục cùng một lúc?

Root 
--Module 
----css 
----sass 
--Module 
----css 
----sass 
--Module 
----css 
----sass 

Và ở đây những gì tôi muốn đạt được: trong giai đoạn phát triển, tôi muốn trỏ la bàn vào thư mục gốc và xem bất kỳ thay đổi nào trong tệp sass thư mục (trong mỗi Module). Khi một trong các tệp .sass thay đổi - tệp .css thích hợp sẽ được tạo (đối với mô-đun đã thay đổi .sass thuộc về) và được đưa vào css thư mục dưới cùng một Module.

Có thể không?

Tôi đoán tôi nên sử dụng config.rb cho mục đích này, nhưng tôi không chắc chắn cách thực hiện điều này đúng cách. Ai đó có thể chỉ cho tôi giải pháp hay chỉ mô tả ý tưởng chung về cách thực hiện nó?

EDIT: Tôi đang trên môi trường Windows, do đó không thể sử dụng lệnh Linux (Tôi có thể cài đặt Cygwin, nhưng tôi muốn tránh nó)

Cảm ơn

+0

Các bạn đã thử thêm một chiếc đồng hồ cho mỗi mô-đun thư mục? Tôi khá chắc chắn điều này là không thể. – markus

+0

Vâng, đây chính là cách tôi giải quyết nó ngay bây giờ - chạy một vài phiên bản la bàn –

+0

Bạn có muốn viết câu trả lời không? – markus

Trả lời

3

Các chỉ workaround tôi tìm thấy là chạy một số cá thể Compass - một cho mỗi mô-đun. Tôi đặt cược có thể có giải pháp thanh lịch hơn bằng cách điều chỉnh mã nguồn Compass, nhưng tiếc là tôi chưa quen với Ruby ...

+4

Trong trường hợp bạn chỉ muốn thêm các nguồn bổ sung để được xem đồng thời nhưng chỉ với một đích biên dịch, thì bạn có thể thêm các nguồn bổ sung trong config.rb bằng 'add_import_path'. – markus

+1

Grunt + la bàn xem nhiều thư mục: http://stackoverflow.com/questions/20661596/running-multiple-compass-sass-watch-operations-tự động –

4

Tôi đã có thiết lập của tôi cấu trúc thư mục khác nhau:

  • tài sản
    • sass
      • module
        • _module1.scss
        • _module2.scss
        • _module3.scss
      • screen.scss
    • stylesheets
      • screen.css
    • config.rb

screen.scss:

@import "modules/module1"; 
@import "modules/module2"; 
@import "modules/module3"; 

config.rb:

... 
css_dir = "stylesheets" 
sass_dir = "sass" 
... 

Các dấu gạch vào đầu của tên mô-đun có nghĩa là họ sẽ không được biên dịch vào file css cá nhân. Các câu lệnh import kết hợp chúng để tất cả các css kết thúc trong screen.css. Lưu ý rằng trong các câu lệnh nhập khẩu, bạn không cần dấu gạch dưới hoặc .scss.

Bạn có thể sửa đổi cấu trúc này một chút nếu bạn muốn duy trì các tệp css riêng lẻ (đó là những gì bạn đề xuất bạn muốn làm). Xóa dấu gạch dưới và la bàn sẽ tạo các tệp riêng lẻ.

  • tài sản
    • sass
      • module
        • module1.scss
        • module2.scss
        • module3.scss
      • screen.scss
    • stylesheets
      • module
        • module1.css
        • module2.css
        • module3.css
      • screen.css
    • config.rb

Trong trường hợp này, bạn không cần phải nhập bất kỳ câu lệnh nhập nào trong screen.scs, vì mỗi tệp riêng lẻ sẽ cần được bao gồm riêng trong tài liệu html.

Trong cả hai trường hợp này, bạn sẽ chạy "đồng hồ la bàn" một lần trong thư mục nội dung. Lưu ý rằng bạn không cần tạo bất kỳ thứ gì trong thư mục stylesheets. La bàn sẽ làm điều đó.

1

Sử dụng additional_import_paths hoặc đơn giản hơn add_import_path trong tệp config.rb của bạn.

additional_import_pathsMảng chuỗi Các đường dẫn khác trên hệ thống của bạn để nhập tệp sass.

add_import_path Gọi hàm này để thêm đường dẫn vào danh sách đường dẫn nhập sass cho dự án la bàn của bạn. Ví dụ: add_import_path "/Users/chris/work/shared_sass"

Xem this answer với các ví dụ về cách sử dụng add_import_path

Nguồn: http://compass-style.org/help/documentation/configuration-reference/

Các vấn đề liên quan