এমন কি এমন কোনও সরঞ্জাম রয়েছে যা CSS কে কম CSS এ রূপান্তর করে?


21

আমার কাছে বেশ বড় সিএসএস ফাইল রয়েছে, যা আমি কম রূপান্তর করতে চাই। আমি যখন সিএসএস লিখি তখন কম সিএসএস জানতাম না, তবে এখনও আমি আমার পুরানো সিএসএস ব্যবহার করতে চাই।

এমন কোনও সরঞ্জাম আছে যা আমাকে স্বয়ংক্রিয়ভাবে রূপান্তর করতে সহায়তা করতে পারে?


আমার সম্পাদনাগুলি নম্র দেখুন।
ফ্যাটঞ্জাজি

আপনার @ সিমোন কারলেটির প্রতিক্রিয়া যাচাই করা উচিত এবং আপনি কী সত্যিই কিছু জিজ্ঞাসা করছেন তার প্রসারিত হতে পারে। আপনার ফাইলটির নাম পরিবর্তনের বাইরে কোনও প্রকৃত "রূপান্তর" প্রয়োজন হতে পারে।
সু '

আকর্ষণীয়, তবে আমি ভাবছি যে CSS ফাইলগুলির আকার হ্রাস করার জন্য 33KB জেএস কোড (কম.জেএস) যুক্ত করা উচিত কিনা।
মার্কো ডেমাইও

1
আমি স্পষ্টতই জাভাস্কিপ্ট সংকলক ব্যবহার করছি না। আর সিএসএসের আকারটি আমি এটি ব্যবহার করার কারণ নয়। রক্ষণাবেক্ষণের কারণ এটি। :)
js-coder

উত্তর:



15

আসলে, কম দিয়ে কাজ শুরু করার জন্য আপনার কোনও রূপান্তর সরঞ্জামের প্রয়োজন নেই। কম সিনট্যাক্স সিএসএসের সাথে পিছনের দিকে সামঞ্জস্যপূর্ণ । এর অর্থ কোনও সিএসএস ফাইলও বৈধ এলইএসএস ফাইল।

কেবল আপনার সিএসএস পান এবং এটিকে একটি কম ফাইলের নামকরণ করুন। তারপরে আপনার পরিবর্তনের পাশাপাশি কম-নির্দিষ্ট বৈশিষ্ট্য ব্যবহার করুন। আপনি যত বেশি ফাইল আপডেট করবেন ততই আপনি কম বৈশিষ্ট্যগুলি ব্যবহার করতে সক্ষম হবেন।

আমি এসসিএসএস এবং 10 টি সিএসএস ফাইল সহ একটি খুব বড় প্রকল্পের জন্য একই কাজ করেছি। এসসিএসএস সহ সমস্ত সিএসএস পুনর্লিখন করা প্রায় অসম্ভব (এবং সময়ের প্রচুর অপচয়) ছিল। আমি কেবল এটির নামকরণ করেছি, তারপরে প্রতিবার সিএসএস ফাইলে কাজ করার সময়, আমি মিশ্রিনগুলি, ভেরিয়েবলগুলি ইত্যাদির সুবিধা নেওয়ার জন্য কোডটিতে ছোট রিফ্যাক্টরিং চালিত করি।


এটি একটি সত্যিই ভাল পয়েন্ট আনে। উত্তরগুলি এখনও পর্যন্ত প্রশ্নের "রূপান্তর" প্রশ্নের দিকে মনোনিবেশিত বলে মনে হচ্ছে, মিশ্রণগুলি করা ইত্যাদি and কেবলমাত্র বর্তমান ফাইলটি কম কর্মপ্রবাহে স্যুইচ করতে ব্যবহার করা যেতে পারে কিনা তা নয় ।
সু '

6

আপনি কি কমপক্ষে তাকিয়েছেন? লেস্টিফাইয়ের চেয়ে সিএসএস রূপান্তর করার ক্ষেত্রে এটি অনেক ভাল। বিশেষত, লেরিফাইটি আপনার ক্লাসগুলি খুব ভালভাবে অনুকূলিত করে না। এটি ব্রাউজারের রিসেটকে এর সমস্ত উত্পন্ন মিশ্রণগুলিতে অনুলিপি করে অনর্থক বৈশিষ্ট্য তৈরি করে। এটি পরিষ্কার যে এটি এখনও পরীক্ষামূলক পর্যায়ে রয়েছে। উভয়ই ইউটিলিটি শব্দার্থবিজ্ঞান নির্ধারণ করতে পারে না, তাই তারা মানগুলি ভাব, বার বা প্যারামেট্রিক মিশ্রণগুলিতে রূপান্তর করতে পারে না।

কমপক্ষে অপ্টিমাইজেশনের আরও ভাল কাজ করে এবং আরও কার্যকরী বলে মনে হয়। এমনকি এটি আপনার জন্য সিউডোক্লাসগুলি পরিচালনা করে:

http://toki-woki.net/p/least/

এই সরঞ্জামগুলি বড় প্রচলিত সিএসএস ফাইলগুলির সাথে কাজ করার জন্য আদর্শ। সিএসএসকে কমটিতে রূপান্তর করার জন্য আমি প্রস্তাবিত পদক্ষেপগুলি এখানে রয়েছে (নিশ্চিত করুন যে আপনি মূল সিএসএস ফাইলগুলির একটি অনুলিপি রেখেছেন):

  1. আপনি যদি বেশ কয়েকটি অ্যাডিটিভ সিএসএস ফাইলের সাথে কাজ করছেন তবে এগুলি একটি সিএসএস ফাইলে মার্জ করুন। এটি নিশ্চিত করে যে সমস্ত কিছু একসাথে স্বল্প ও অনুকূলিত optim

  2. একটি অনলাইন সিএসএস পরিষ্কারের ইউটিলিটির মাধ্যমে ফলাফলের সিএসএস কোডটি চালান। ক্লিনসিএসএসের সাথে আমার ভাল ফলাফল হয়েছে: http://www.cleancss.com/ । এটি এমন কোনও বহিরাগত এবং অপ্রয়োজনীয় মার্কআপ সরিয়ে ফেলবে যা কোনও এলইএসইএস রূপান্তরকারী দ্বারা ধরা নাও পারে।

  3. সিএসএস ফাইলে @ মিডিয়া এবং যে কোনও স্টাইলের রিসেটগুলি সরান। তারা সমস্যা তৈরি করতে পারে বা সম্ভাব্য অপ্রয়োজনীয়তার পরিচয় দিতে পারে। পুনরায় সেটগুলি পৃথক ফাইলে রাখা সম্ভবত একটি ভাল ধারণা।

  4. ফলাফলের সিএসএস ফাইলটি কমপক্ষে আটকান এবং জানোয়ারটি দেখুন।

  5. আপনার পুনরায় সেট এবং @ স্ক্রিন পুনরায় প্রবর্তন করুন।

  6. এখন আপনার কাজটি শেষ হয়ে গেছে, প্রতিটি গুণাবলীর মধ্য দিয়ে যান এবং রিফ্যাক্টরিংয়ের জন্য ভাল প্রার্থী সন্ধান করুন এবং সেগুলি কম ভেরিয়েবল এবং এক্সপ্রেশনগুলিতে পরিণত করুন। সিএসএস রঙ এবং ফন্টের বৈশিষ্ট্যগুলি ফ্যাক্ট আউট করা সহজ, সাধারণ গ্লোবাল অনুসন্ধান এবং কাজগুলি সূক্ষ্ম প্রতিস্থাপনের জন্য সহজ। শেষে, আপনি সিদ্ধান্ত নিতে পারেন যে আপনি একক ফাইলকে ছোট ছোট লজিকাল ফাইলগুলিতে বিভক্ত করতে চান। আপনি দেখতে পাচ্ছেন যে প্রক্রিয়াটি আপনাকে বিভিন্নভাবে আপনার ফাইলগুলি পুনর্গঠিত করার কারণ করে।

আমি লেস্টের লেখক নই, কেবল কেউ একই ধরণের সরঞ্জাম খুঁজছেন এবং বিশ্বকে সে সম্পর্কে বলার সিদ্ধান্ত নিয়েছেন।


Those রূপান্তরকারীরা কি বোঝে না @import? আমি ভেবেছিলাম @importযখন আপনার কম ফাইলগুলি সংকলন করা হয় তখন কম স্টেটমেন্টগুলি পার্স করতে এবং আপনার সমস্ত স্টাইলশীটকে একটি সিএসএসে একীভূত করতে সক্ষম হয় । দেখে মনে হচ্ছে আপনার সমস্ত সুস্পষ্টভাবে সংগঠিত সিএসএসকে একটি একক জায়ান্ট স্টাইলশীটে ডাম্পিং করা একে LESS এ রূপান্তর করার জন্য এটি রক্ষণাবেক্ষণের জন্য এক ধাপ পিছনে যেতে পারে।
লজ মাজেস্ট

তারা তা করে, তবে মনে রাখবেন যে এই সরঞ্জামগুলি অনলাইনে রয়েছে তাই আপনাকে এগুলি কোনও টেক্সট ক্ষেত্রে কাটাতে হবে এবং এতে আটকানো হবে যাতে এটি আপনার বাহ্যিক স্টাইলশিটে অ্যাক্সেস না করে।
জোয়েল রজার্স

আহ, আমি লিঙ্কগুলিতে আসলে ক্লিক করিনি। আমি ধরে নিয়েছিলাম তারা ডেস্কটপ সরঞ্জাম ছিল। তা হলে তা বোঝা যায় না।
লজে মেজেস্টে

5

আমি মনে করি না যে কোনও কোডের মাধ্যমে আপনি কী করতে চান তা কনভার্টারের কোনও উপায় আছে know

উদাহরণস্বরূপ, আপনি প্রয়োজনীয় কোন ভেরিয়েবলগুলি ব্যবহার করতে চেয়েছিলেন তা অগত্যা জানা যাবে না। অথবা কীভাবে মিক্সিন বা ফাংশন জেনারেট করা যায়।

আমি মনে করি এটির সাথে আপনার নিজে এটি করতে হবে।


একমত। এখানে আপনার অভিপ্রায় সম্পর্কে নির্দিষ্ট পরিমাণের অনুমান এবং জ্ঞানের প্রয়োজন রয়েছে যে কম্পিউটারগুলি কেবল খুব বেশি উপযুক্ত নয়। আপনি কিছু কাজ স্বয়ংক্রিয় করতে সক্ষম হবেন (@ ডটওয়েব থেকে লিঙ্কটি দেখুন) এবং রঙের মানগুলির মতো জিনিসগুলিকে একক ভেরিয়েবলে একীকরণ করতে সক্ষম হবেন তবে এটি সম্ভবত এটির বিষয়ে।
সু '

হ্যাঁ, তবে এলএসইএস থেকে সিএসএসে রূপান্তরকরণ 1 থেকে 1 রূপান্তর, সুতরাং তাত্ত্বিকভাবে এমন কিছু অ্যালগোরিদম উপস্থিত রয়েছে যা সিএসএস থেকে অপ্টিমাইজড এলইএসইএস কোড তৈরি করতে পারে ... কাউকে কেবল এটি লিখতে হবে।
trusktr

মিক্সিনগুলি যে কোনও উপায়ে যেতে পারে, যেহেতু কম্পিউটারের জন্য নির্বাচকদের একত্রে সংগ্রহ করা এবং তাদের বাসা বাঁধাই কম্পিউটারের পক্ষে সহজ। ভাগ্যক্রমে, এটি রূপান্তরটির সবচেয়ে ক্লান্তিকর অংশ এবং এটি গণনাযোগ্য (আমার উত্তর দেখুন)। নির্বিশেষে, সিএসএসের ক্যাসকেডিং প্রকৃতি দেওয়া, এটি মূল সিএসএস থেকে আলাদাভাবে রেন্ডার হতে পারে। চলক এবং এক্সপ্রেশন অসম্ভব। কম্পিউটারগুলি অভিপ্রায় বা শব্দার্থবিজ্ঞান নির্ধারণ করতে পারে না। কীভাবে একটি কম্পিউটার এই প্রস্থটি নির্ধারণ করতে পারে: CSS এ 400 আসলে প্রস্থ: পেজ প্রস্থ / 2 কম? কনভার্টারের পক্ষে রঙ এবং ফন্টগুলিকে ভেরিয়েবলে রূপান্তর করা সম্ভব হবে।
জোয়েল রডজার্স

@ জোয়েলরোজার্স, সিএসএসের ক্যাসকেডিং প্রকৃতি কেন "ডেকম্পিলার" বগী হবে তা বোঝায়? (স্পষ্টতই একটি ডেস্কপাইলার বগি হতে পারে, তবে নীতিগতভাবে শর্তাবলীর পুনরায় অর্ডারিং শব্দার্থকে বদলে দেবে কিনা তা বলা শক্ত নয়)।
পিটার টেলর

আমি বর্গ ঘোষণা এবং বৈশিষ্ট্য সম্পর্কে কথা বলছি। আপনাকে সেগুলি ঠিক একই ক্রমে ঘোষণা করতে হবে অন্যথায় আপনার ভিন্ন ফলাফল হবে। খারাপ ভুল, আমি মিক্সিনের পরিবর্তে নেস্টেড বিধিগুলি বোঝাতে চাইছি।
জোয়েল রজার্স

3

কীভাবে অনুসন্ধান এবং প্রতিস্থাপন সম্পর্কে।

যদি আপনার থাকে color:#ffffffএবং আপনি এটিতে পরিবর্তন করতে চান@color

শুধু অনুসন্ধান color:#ffffffবা color : #ffffffএবং প্রতিস্থাপন @color

আমি সাধারণত এই সরঞ্জামগুলিতে বিশ্বাস করি না।

অথবা আপনি সত্যিই একটি সহজ পিএইচপি স্ক্রিপ্ট লিখতে পারেন যা এটি পরিচালনা করে।

আপডেট 1 :
অথবা আপনি http://nex-3.com/posts/96-scss-sass-is-a-css-extension ব্যবহার করতে পারেন যা কম অনুরূপ এবং এতে একটি রূপান্তরকারী সরঞ্জাম রয়েছে।


হ্যাঁ, আমি ইতিমধ্যে এটি সম্পর্কে ভেবেছিলাম। তবে এটি একটি দুর্দান্ত ফাইল, তাই আমি নিশ্চিত করতে চাই যে এটিই সহজতম উপায়। ;)

অথবা আপনি সত্যিই একটি সহজ পিএইচপি স্ক্রিপ্ট লিখতে পারেন যা এটি পরিচালনা করে।
ফ্যাটঞ্জাজি

1
আপনি এমন একটি সরঞ্জাম সন্ধান করতে পারবেন না যা নির্ভরযোগ্যভাবে খাঁটি সিএসএসকে LESS মিক্সিন ব্যবহার করে রূপান্তর করে।
অলেক্স 18

তুমি ঠিক. স্বয়ংক্রিয় ভেরিয়েবল এবং মিক্সিং অজ্ঞান।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.