আমি এসএএসএস পার্টিয়ালগুলির সাথে আমার স্টাইলশিটগুলিকে মডুলারাইজ করছি:
@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
পুরো পার্টিয়াল ডিরেক্টরিকে অন্তর্ভুক্ত করার কোনও উপায় আছে (এটি SASS-partials পূর্ণ ডিরেক্টরি) যেমন @ ইম্পোর্ট কম্পাস বা অন্য কিছু?
উত্তর:
আপনি যদি কোনও রেলস প্রকল্পে সাস ব্যবহার করছেন তবে সাস-রেল মণি, https://github.com/rails/sass-rails গ্লোব আমদানি করে।
@import "foo/*" // import all the files in the foo folder
@import "bar/**/*" // import all the files in the bar tree
অন্য উত্তরে উদ্বেগের উত্তর দেওয়ার জন্য "আপনি যদি কোনও ডিরেক্টরি আমদানি করেন তবে কীভাবে আপনি আমদানি ক্রম নির্ধারণ করতে পারবেন? এমন কোনও উপায় নেই যা কিছু নতুন স্তরের জটিলতার পরিচয় দেয় না।"
কেউ কেউ যুক্তিযুক্ত হতে পারে যে আপনার ফাইলগুলি ডিরেক্টরিগুলিতে সংগঠিত করা জটিলতা হ্রাস করতে পারে।
আমার সংস্থার প্রকল্পটি বরং একটি জটিল অ্যাপ। 17 ডিরেক্টরিতে 119 স্যাস ফাইল রয়েছে। এগুলি আমাদের মতামতের সাথে মোটামুটি মিলিয়ে এবং মূলত সামঞ্জস্যের জন্য ব্যবহৃত হয়, ভারি উত্তোলনটি আমাদের কাস্টম কাঠামোর দ্বারা পরিচালিত হয়। আমার কাছে, আমদানিকৃত ডিরেক্টরিগুলির কয়েকটি লাইন আমদানিকৃত ফাইলের নামগুলির 119 টি লাইনের চেয়ে কম জটিল।
লোড অর্ডার সম্বোধন করার জন্য, আমরা প্রাথমিক - লোডিং ডিরেক্টরিতে প্রথমে - মিক্সিন, ভেরিয়েবল ইত্যাদি - লোড করা দরকার এমন ফাইলগুলি রাখি। অন্যথায়, লোড অর্ডারটি অপ্রাসঙ্গিক হওয়া উচিত ... যদি আমরা জিনিসগুলি সঠিকভাবে করি।
@import "*"(application.css.scss এ) যদি আপনার কন্ট্রোলার সিএসএস / এসএসএস ফাইলগুলি "অ্যাপ্লিকেশন / সম্পদ / স্টাইলশীট" ফোল্ডারে একত্রে অ্যাপ্লিকেশন সিএসএসএসএসএস এর সাথে থাকে।
@import "*"অ্যাপ্লিকেশন.এসএসএস-এ বলার সাথে একই ডিরেক্টরিতে উপস্থিত অন্য সমস্ত ফাইল অন্তর্ভুক্ত রয়েছে তবে অ্যাপ্লিকেশন.এসএসএস-কে পুনরায় অন্তর্ভুক্ত করে না ... আমি অসীম লুপিং বাগটি প্রত্যাশা করেছিলাম।
এই বৈশিষ্ট্যটি কখনই সাসের অংশ হবে না। একটি প্রধান কারণ আমদানি ক্রম। সিএসএসে, সর্বশেষ আমদানি করা ফাইলগুলি পূর্বে বর্ণিত স্টাইলগুলিকে ওভাররাইড করতে পারে। আপনি যদি কোনও ডিরেক্টরি আমদানি করেন তবে কীভাবে আপনি আমদানি ক্রম নির্ধারণ করতে পারেন? এমন কোনও উপায় নেই যা জটিলতার কোনও নতুন স্তরের পরিচয় দেয় না। আমদানির একটি তালিকা রেখে (যেমন আপনি আপনার উদাহরণ হিসাবে করেছিলেন), আপনি আমদানি ক্রমের সাথে সুস্পষ্ট হয়ে যাচ্ছেন। আপনি যদি অন্য কোনও ফাইলে সংজ্ঞায়িত স্টাইলগুলি আত্মবিশ্বাসের সাথে ওভাররাইড করতে সক্ষম হন বা একটি ফাইলে মিক্সিন লিখতে এবং অন্যটিতে ব্যবহার করতে চান তবে এটি প্রয়োজনীয়।
আরও বিশদ আলোচনার জন্য, এই বদ্ধ বৈশিষ্ট্যটির অনুরোধটি এখানে দেখুন:
@import "/functions"বা @import "partials/"।
পরীক্ষা করে দেখুন Sass-globbing প্রকল্পের ।
আমি __partials__.scssএকই ডিরেক্টরিতে নামের একটি ফাইল তৈরি করিpartials
|- __partials__.scss
|- /partials
|- __header__.scss
|- __viewport__.scss
|- ....
ইন __partials__.scss, আমি এগুলি লিখেছি:
@import "partials/header";
@import "partials/viewport";
@import "partials/footer";
@import "partials/forms";
....
সুতরাং, আমি যখন পুরোটি আমদানি করতে চাই partials, কেবল লিখুন @import "partials"। আমি যদি সেগুলির কোনও আমদানি করতে চাই তবে আমিও লিখতে পারি @import "partials/header"।
@import 'partials/xyz'প্রতিবার নতুন আংশিক তৈরি হওয়ার সময় তিনি ম্যানুয়ালি বিবৃতি যুক্ত না করেই ফাইলগুলি আমদানি করতে চান ।
formsএবং widgetsডিরেক্টরিগুলি থাকে তবে আমি @import "forms"; @import "widgets"কোনও পৃষ্ঠার জন্য প্রধান সিএসএস ফাইলে থাকতে পারি এবং কেবলমাত্র অভ্যন্তরীণ এবং সমস্ত পৃথক পার্টিশন ( @import forms/text; @import forms/button...) forms.scssনিয়ে উদ্বেগ প্রকাশ করতে পারি widgets.scss।
আপনি যে ফাইলটি এই ফাইলটিতে সমস্ত ফাইল আমদানি এবং আমদানি করতে চান সেটি ফোল্ডারে একটি সাস ফাইল রেখে কিছুটা কাজ করতে পারবেন:
ফাইলের পথ: প্রধান / বর্তমান / _কোর্ন.এসএসএস
@import "placeholders";
@import "colors";
এবং পরবর্তী দির স্তরের ফাইলে আপনি কেবল সেই ফাইলের জন্য আমদানি ব্যবহার করেন যা সেই দির থেকে সমস্ত ফাইল আমদানি করে:
ফাইল পাথ: main / main.scss
@import "EricMeyerResetCSSv20";
@import "clearfix";
@import "current";
আপনি পুরো দির আমদানি করছেন এমনভাবে আপনার কাছে একই সংখ্যক ফাইল রয়েছে। অর্ডার থেকে সাবধান থাকুন, সর্বশেষে আসে ফাইলটি মিলবে স্টাইলগুলি ওভাররাইড করে।
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#import
দেখে মনে হচ্ছে না।
যদি এই ফাইলগুলির মধ্যে যে কোনওটির সর্বদা অন্যগুলির প্রয়োজন হয় তবে তাদের অন্য ফাইলগুলি আমদানি করুন এবং কেবলমাত্র শীর্ষ-স্তরের ফাইলগুলি আমদানি করুন। যদি তারা সবাই একা হয়ে থাকে, তবে আমার মনে হয় আপনার এখনকার মতো এটি করা চালিয়ে যেতে হবে।
ডেনিস বেস্টের গৃহীত উত্তরে বলা হয়েছে যে "অন্যথায় লোড অর্ডারটি অপ্রাসঙ্গিক হওয়া উচিত ... যদি আমরা জিনিসগুলি সঠিকভাবে করি তবে"। এটি কেবল ভুল is আপনি যদি জিনিসগুলি যথাযথভাবে করেন তবে আপনি সিএসএস অর্ডারটি আপনাকে সুনির্দিষ্টতা হ্রাস করতে এবং আপনাকে সিএসএস সহজ এবং পরিষ্কার রাখার জন্য ব্যবহার করে।
আমি আমদানিগুলি সংগঠিত করতে যা করি তা হ'ল _all.scssএকটি ডিরেক্টরিতে একটি ফাইল যুক্ত করা হয়, যেখানে আমি এটিতে সমস্ত প্রাসঙ্গিক ফাইলগুলি সঠিক ক্রমে আমদানি করি। এইভাবে, আমার প্রধান আমদানি ফাইলটি সহজ এবং পরিষ্কার হবে, এর মতো:
// Import all scss in the project
// Utilities, mixins and placeholders
@import 'utils/_all';
// Styles
@import 'components/_all';
@import 'modules/_all';
@import 'templates/_all';
আপনার যদি প্রয়োজন হয় তবে আপনি সাব-ডিরেক্টরিতেও এটি করতে পারেন তবে আমি মনে করি না যে আপনার সিএসএস ফাইলগুলির কাঠামো খুব গভীর হওয়া উচিত।
যদিও আমি এই পদ্ধতির ব্যবহার করি, তবুও আমি মনে করি যে সাসে একটি গ্লোব আমদানি উপস্থিত থাকা উচিত, এমন পরিস্থিতিতে যেখানে অর্ডার মেশিন বা এমনকি অ্যানিমেশনগুলির ডিরেক্টরি হিসাবে গুরুত্বপূর্ণ নয় for
আমি আপনার প্রশ্নের উত্তর খুঁজতে চাই। উত্তরের সাথে মিল রেখে সঠিক আমদানি সমস্ত কার্য উপস্থিত নেই।
আমি কেন অজগর স্ক্রিপ্ট লিখেছি তা আপনাকে আপনার স্ক্যাস ফোল্ডারের মূলের মধ্যে রেখে দেওয়া দরকার:
- scss
|- scss-crawler.py
|- abstract
|- base
|- components
|- layout
|- themes
|- vender
এটি তখন গাছের মধ্য দিয়ে হাঁটবে এবং সমস্ত স্ক্যাস ফাইলগুলি সন্ধান করবে। একবার মৃত্যুদন্ড কার্যকর হলে, এটি মেইন.এসএসএসএস নামে একটি স্ক্যাস ফাইল তৈরি করবে
#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)
একটি আউটপুট ফাইলের একটি উদাহরণ:
/* 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';
এটা আমার জন্য ভাল কাজ করে
@import 'folder/*';
আপনি SASS ফাইল তৈরি করতে পারেন যা সবকিছু স্বয়ংক্রিয়ভাবে আমদানি করে, আমি এই গুল্প টাস্কটি ব্যবহার করি:
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'))
})
আপনি এই জাতীয় ফোল্ডারগুলি অর্ডার করে অর্ডার আমদানি নিয়ন্ত্রণ করতে পারেন:
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
]
এটি একটি পুরানো প্রশ্ন হতে পারে তবে 2020-এ এখনও প্রাসঙ্গিক, তাই আমি কিছু আপডেট পোস্ট করতে পারি। Octobers'19 আপডেট যেহেতু আমরা সাধারণত ব্যবহার করা উচিত @use পরিবর্তে @import , কিন্তু যে শুধুমাত্র একটি মন্তব্য আছে। এই প্রশ্নের সমাধান হ'ল সম্পূর্ণ ফোল্ডারগুলি সহ সহজ করার জন্য সূচি ফাইলগুলি ব্যবহার করা। নীচে উদাহরণ।
// 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
@forwardআপনার _index.scss এর পরিবর্তে@use
ফাইলটি আমদানি করার জন্য সংজ্ঞায়িত করে সমস্ত ফোল্ডারগুলির সাধারণ সংজ্ঞা ব্যবহার করা সম্ভব।
সুতরাং, @import "style/*"স্টাইল ফোল্ডারের সমস্ত ফাইল সংকলন করবে।
সাসে আমদানি বৈশিষ্ট্য সম্পর্কে আরও আপনি এখানে দেখতে পারেন ।
@import 'partials/header', 'partials/viewport', 'partials/footer';।