Tôi đang mô đun hóa các bảng định kiểu của mình với các phần SASS như vậy:
@import partials/header
@import partials/viewport
@import partials/footer
@import partials/forms
@import partials/list_container
@import partials/info_container
@import partials/notifications
@import partials/queues
Có cách nào để bao gồm toàn bộ thư mục partials (đó là một thư mục chứa đầy SASS-partials) như la bàn @import hay gì đó không?
Câu trả lời:
Nếu bạn đang sử dụng Sass trong dự án Rails, đá quý sass-rails, https://github.com/rails/sass-rails , tính năng nhập toàn cầu.
@import "foo/*" // import all the files in the foo folder
@import "bar/**/*" // import all the files in the bar tree
Để trả lời mối quan tâm trong một câu trả lời khác "Nếu bạn nhập một thư mục, làm thế nào bạn có thể xác định thứ tự nhập? Không có cách nào không giới thiệu một mức độ phức tạp mới."
Một số người sẽ lập luận rằng việc tổ chức các tệp của bạn vào các thư mục có thể làm giảm sự phức tạp.
Dự án của tổ chức tôi là một ứng dụng khá phức tạp. Có 119 tệp Sass trong 17 thư mục. Chúng tương ứng với quan điểm của chúng tôi và chủ yếu được sử dụng để điều chỉnh, với việc nâng vật nặng được xử lý bởi khung tùy chỉnh của chúng tôi. Đối với tôi, một vài dòng thư mục được nhập là ít phức tạp hơn so với 119 dòng tên tệp đã nhập.
Để giải quyết thứ tự tải, chúng tôi đặt các tệp cần tải trước - mixins, biến, v.v. - trong thư mục tải sớm. Mặt khác, thứ tự tải là và không liên quan ... nếu chúng ta đang làm mọi thứ đúng cách.
@import "*"(trong application.css.scss) nếu các tệp css / scss của trình điều khiển của bạn nằm trong thư mục "app / property / stylheets" cùng với application.css.scss.
@import "*"trong application.scss bao gồm tất cả các tệp khác có trong cùng một thư mục nhưng không bao gồm lại application.scss ... Tôi dự kiến sẽ gặp một lỗi lặp vô hạn.
Tính năng này sẽ không bao giờ là một phần của Sass. Một lý do chính là đơn hàng nhập khẩu. Trong CSS, các tệp được nhập cuối cùng có thể ghi đè lên các kiểu đã nêu trước đó. Nếu bạn nhập một thư mục, làm thế nào bạn có thể xác định thứ tự nhập? Không có cách nào không giới thiệu một số mức độ phức tạp mới. Bằng cách giữ một danh sách nhập khẩu (như bạn đã làm trong ví dụ của mình), bạn rõ ràng với đơn hàng nhập khẩu. Điều này rất cần thiết nếu bạn muốn có thể tự tin ghi đè các kiểu được xác định trong tệp khác hoặc viết mixins trong một tệp và sử dụng chúng trong tệp khác.
Để thảo luận kỹ hơn, xem yêu cầu tính năng đóng này tại đây:
@import "/functions"hoặc @import "partials/".
Kiểm tra dự án sass-globalbing .
Tôi tạo một tệp có tên __partials__.scsstrong cùng thư mục củapartials
|- __partials__.scss
|- /partials
|- __header__.scss
|- __viewport__.scss
|- ....
Trong __partials__.scss, tôi đã viết những điều này:
@import "partials/header";
@import "partials/viewport";
@import "partials/footer";
@import "partials/forms";
....
Vì vậy, khi tôi muốn nhập toàn bộ partials, chỉ cần viết @import "partials". Nếu tôi muốn nhập bất kỳ trong số họ, tôi cũng có thể viết @import "partials/header".
@import 'partials/xyz'câu lệnh theo cách thủ công mỗi khi một phần mới được tạo.
formsvà widgetsthư mục, tôi có thể @import "forms"; @import "widgets"trong tệp CSS chính cho một trang và chỉ lo lắng về tất cả các phần riêng lẻ ( @import forms/text; @import forms/button...) bên trong forms.scssvà widgets.scss.
Bạn có thể sử dụng một chút cách giải quyết bằng cách đặt tệp sass vào thư mục những gì bạn muốn nhập và nhập tất cả các tệp trong tệp đó như sau:
đường dẫn tệp: main / current / _civerse.scss
@import "placeholders";
@import "colors";
và trong tệp cấp thư mục tiếp theo, bạn chỉ cần sử dụng nhập cho tệp những gì đã nhập tất cả các tệp từ thư mục đó:
đường dẫn tệp: main / main.scss
@import "EricMeyerResetCSSv20";
@import "clearfix";
@import "current";
Bằng cách đó, bạn có cùng số lượng tệp, giống như bạn đang nhập toàn bộ thư mục. Cẩn thận với thứ tự, tập tin đến cuối cùng sẽ ghi đè lên các cọc phù hợp.
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#import
không giống như nó
Nếu bất kỳ tệp nào trong số này luôn yêu cầu các tệp khác, thì hãy nhập chúng vào các tệp khác và chỉ nhập các tệp cấp cao nhất. Nếu tất cả đều độc lập, thì tôi nghĩ bạn sẽ phải tiếp tục làm như bạn bây giờ.
Câu trả lời được chấp nhận bởi Dennis Best nói rằng "Nếu không, thứ tự tải là và không liên quan ... nếu chúng ta đang làm việc đúng cách." Điều này chỉ đơn giản là không chính xác. Nếu bạn đang làm việc đúng cách, bạn sử dụng thứ tự css để giúp bạn giảm tính cụ thể và giữ cho bạn css đơn giản và sạch sẽ.
Những gì tôi làm để tổ chức nhập là thêm một _all.scsstệp trong một thư mục, nơi tôi nhập tất cả các tệp có liên quan trong đó, theo đúng thứ tự. Bằng cách này, tệp nhập chính của tôi sẽ đơn giản và rõ ràng, như thế này:
// Import all scss in the project
// Utilities, mixins and placeholders
@import 'utils/_all';
// Styles
@import 'components/_all';
@import 'modules/_all';
@import 'templates/_all';
Bạn cũng có thể làm điều này cho các thư mục con, nếu bạn cần, nhưng tôi không nghĩ cấu trúc của các tệp css của bạn quá sâu.
Mặc dù tôi sử dụng phương pháp này, tôi vẫn nghĩ rằng việc nhập toàn cầu nên tồn tại trong sass, trong trường hợp thứ tự không quan trọng, như thư mục mixin hoặc thậm chí hoạt hình.
Tôi cũng tìm kiếm một câu trả lời cho câu hỏi của bạn. Tương ứng với các câu trả lời nhập chính xác tất cả các chức năng không tồn tại.
Đó là lý do tại sao tôi đã viết một tập lệnh python mà bạn cần đặt vào thư mục gốc của thư mục scss của mình như vậy:
- scss
|- scss-crawler.py
|- abstract
|- base
|- components
|- layout
|- themes
|- vender
Sau đó nó sẽ đi qua cây và tìm tất cả các tập tin scss. Sau khi thực hiện, nó sẽ tạo một tệp scss gọi là main.scss
#python3
import os
valid_file_endings = ["scss"]
with open("main.scss", "w") as scssFile:
for dirpath, dirs, files in os.walk("."):
# ignore the current path where the script is placed
if not dirpath == ".":
# change the dir seperator
dirpath = dirpath.replace("\\", "/")
currentDir = dirpath.split("/")[-1]
# filter out the valid ending scss
commentPrinted = False
for file in files:
# if there is a file with more dots just focus on the last part
fileEnding = file.split(".")[-1]
if fileEnding in valid_file_endings:
if not commentPrinted:
print("/* {0} */".format(currentDir), file = scssFile)
commentPrinted = True
print("@import '{0}/{1}';".format(dirpath, file.split(".")[0][1:]), file = scssFile)
một ví dụ về tệp đầu ra:
/* abstract */
@import './abstract/colors';
/* base */
@import './base/base';
/* components */
@import './components/audioPlayer';
@import './components/cardLayouter';
@import './components/content';
@import './components/logo';
@import './components/navbar';
@import './components/songCard';
@import './components/whoami';
/* layout */
@import './layout/body';
@import './layout/header';
điều này làm việc tốt cho tôi
@import 'folder/*';
Bạn có thể tạo tệp SASS tự động nhập mọi thứ, tôi sử dụng tác vụ Gulp này:
concatFilenames = require('gulp-concat-filenames')
let concatFilenamesOptions = {
root: './',
prepend: "@import '",
append: "'"
}
gulp.task('sass-import', () => {
gulp.src(path_src_sass)
.pipe(concatFilenames('app.sass', concatFilenamesOptions))
.pipe(gulp.dest('./build'))
})
Bạn cũng có thể kiểm soát thứ tự nhập bằng cách đặt hàng các thư mục như thế này:
path_src_sass = [
'./style/**/*.sass', // mixins, variables - import first
'./components/**/*.sass', // singule components
'./pages/**/*.sass' // higher-level templates that could override components settings if necessary
]
Nó có thể là một câu hỏi cũ, nhưng vẫn có liên quan vào năm 2020, vì vậy tôi có thể đăng một số cập nhật. Vì bản cập nhật 19 của Octobers, chúng tôi thường nên sử dụng @use thay vì @import , nhưng đó chỉ là một nhận xét. Giải pháp cho câu hỏi này là sử dụng các tệp chỉ mục để đơn giản hóa bao gồm toàn bộ các thư mục. Ví dụ dưới đây.
// foundation/_code.scss
code {
padding: .25em;
line-height: 0;
}
// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
// foundation/_index.scss
@use 'code';
@use 'lists';
// style.scss
@use 'foundation';https://sass-lang.com/documentation/at-rules/use#index-files
@forwardtrong _index.scss của mình thay vì@use
Với việc xác định tệp để nhập, có thể sử dụng tất cả các thư mục định nghĩa chung.
Vì vậy, @import "style/*"sẽ biên dịch tất cả các tệp trong thư mục kiểu.
Tìm hiểu thêm về tính năng nhập trong Sass bạn có thể tìm thấy ở đây .
@import 'partials/header', 'partials/viewport', 'partials/footer';.