Nhiều tệp SCSS/SASS vào một tệp CSS?

Question

Có thể làm cho sass lắng nghe một thư mục với nhiều tệp sass và tạo một tệp CSS không? Tôi đã tìm thấy một cách bằng cách bao gồm nhiều tác phẩm sass thành một (style.scss):

@import "scss/header"; 
@import "scss/footer"; 

Và sau đó chạy đoạn mã sau:

sass --watch style.scss:style.css 

nhưng vấn đề là tôi cần phải thay đổi tập tin đó trước khi tôi tạo một tệp CSS mới.

Answer 1

Nếu bạn xem thư mục, sass sẽ có thể nhận thấy các thay đổi trong tệp @imported và cập nhật tệp phụ thuộc.

style.scss:

@import "header"; 
@import "footer"; 

Và làm:

sass --watch . 

Nó sẽ biên dịch tất cả các file trong thư mục để .css; bỏ qua các tệp có tên bắt đầu bằng số _.

Tôi bạn sửa đổi _header.scss hoặc _footer.scss, nếu cũng cập nhật style.scss.

Bạn cũng có thể sản lượng trong một thư mục khác:

sass --watch .:output_dir/ 

Answer 2

Bạn có thể nói Sass để xem toàn bộ một thư mục với:

sass --watch application/sass:public/stylesheets 

Nếu bạn nhập tất cả các file cục bộ của bạn, điều này sẽ tạo ra một tập tin. Mỗi khi bạn chỉnh sửa một tệp trong thư mục, các tệp CSS sẽ được tạo tự động.

Answer 3

Chỉ muốn thêm, Bạn cũng có thể gọi biến ($) và mixins từ các tập tin khác.

Ví dụ:

_variable.scss = $primary:#000
_header.scss = header {color:$primary;}
_footer.scss = footer {background:$primary}

custom.scss:

@import "_variables.scss"; 
@import "_header.scss"; 
@import "_footer.scss"; 

Output = custom.css

header {color:#000;} 
footer {background:#000;}