CSS3 ক্যালকের সাথে কম আক্রমণাত্মক সংকলন

Question

কম কম্পাইলার যে আমি (ব্যবহার করছি OrangeBits এবং বিন্দু বিহীন 1.3.0.5 ) সহিংস অনুবাদ করছেন

body { width: calc(100% - 250px - 1.5em); }

মধ্যে

body { width: calc(-151.5%); }

যা স্পষ্টতই কাঙ্ক্ষিত নয়। আমি ভাবছি যে সংকলনের সময় অ্যাট্রিবিউটটি মূলত উপেক্ষা করার জন্য কম সংকলকটিতে সংকেত দেওয়ার কোনও উপায় আছে কিনা। আমি কম ডকুমেন্টেশন এবং উভয় সংকলকের ডকুমেন্টেশন দিয়ে অনুসন্ধান করেছি এবং আমি কিছুই খুঁজে পেলাম না।

কম বা কম সংকলক কি এটি সমর্থন করে?

যদি তা না হয় তবে কি কোনও সিএসএস এক্সটেন্ডার রয়েছে?

Comments

আপনি কি নিশ্চিত যে আপনি কম কমগ্রাহক সংকলক চান না?

— ফিয়াটজাফ

আমিও খুব নিশ্চিত, সংকলকটি আরও আক্রমণাত্মক হতে চাই! (পূর্ববর্তী মন্তব্যে দ্বিগুণ প্রত্যাখ্যান আমাকে বিভ্রান্ত করেছে;))) (সুতরাং আমার

— ভোটটিও

Answer 1

কম থেকে আর আর calcডিফল্ট ভিতরে অভিব্যক্তি মূল্যায়ন v3.00।

---

আসল উত্তর ( Less v1.x...2.x):

এটা কর:

body { width: calc(~"100% - 250px - 1.5em"); }

কম ১.৪.০ এ আমাদের একটি strictMathsবিকল্প থাকবে যার জন্য বন্ধনীর মধ্যে থাকা সমস্ত কম গণনা প্রয়োজন, সুতরাং calc"বাক্সের বাইরে" কাজ করবে। এটি একটি বিকল্প যেহেতু এটি একটি বড় ব্রেকিং পরিবর্তন। প্রথম দিকের 1.4.0 বেটাসের ডিফল্টরূপে এই বিকল্প ছিল। মুক্তির সংস্করণটি ডিফল্টরূপে এটি বন্ধ করে দিয়েছে।

Comments

মনে রাখবেন যে আপনি টুইটারের অবকাশের সাথে কম সংকলন করলে এটি এই পালানো উপেক্ষা করে । কমপক্ষে এই মন্তব্য লেখার সময়।

— আটটিলা ফুলপ

আমি স্রেফ কম calc(100% - 50px)সিএসএস 1.4.0 এ চেষ্টা করেছি এবং ফলাফল ছিল calc(50%)। দুর্দান্ত ~"..."কৌশলটি অবিরত কাজ করে চলেছে, তবে আমি "বাইরের অফ বাক্স" বিবৃতিতে বিভ্রান্ত হয়েছি, যা আমাকে ভাবায় যে উপরের কাজ করবে। লুক, calcকম 1.4.0 পরিবর্তনের জন্য কীভাবে সমর্থন করে ? ধন্যবাদ!

— ব্রায়ান এম হান্ট

প্রশ্নটি হ'ল কম.জেএস কেন প্রথম স্থানে এটি গণনা করার চেষ্টা করেছিল? এটি "100% - 250px" এর জন্য একটি ত্রুটি ছুঁড়ে ফেলা উচিত কারণ এটি কোনও বোধগম্য জবাব গণনা করতে পারে না।

— এমপেন

ভবিষ্যতের পাঠকদের জন্য, আপনি কেবলমাত্র অপারেটর থেকে পালাতে পারেন, আপনাকে ভেরিয়েবলগুলি ব্যবহার করতে সক্ষম করে। উদাহরণ:calc(@somePercent ~"-" @someLength)

— বি 10011

এটির কম ভুল গণনার পরিবর্তে বা একটি ত্রুটি ছুঁড়ে ফেলার পরিবর্তে কেন ব্যবহারকারী বুঝতে পারে না যে এটি করার চেষ্টা করছে এবং একা রেখে চলেছে? স্পষ্টতই একটি শতাংশ এবং একটি পিক্সেল মান একসাথে কম গণনা করা যায় না।

— dfmiller

Answer 2

ক্যালকের খুব সাধারণ ব্যবহারের ক্ষেত্রটি 100% প্রস্থ নেয় এবং উপাদানটির চারপাশে কিছু মার্জিন যুক্ত হয়।

কেউ এর সাথে এটি করতে পারে:

@someMarginVariable = 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);

Comments

-o-calc- এখনও সমর্থিত নয় ।

— অন্য

Answer 3

একই ফলাফল সহ অনেকগুলি পালানোর বিকল্প রয়েছে:

body { width: ~"calc(100% - 250px - 1.5em)"; }
body { width: calc(~"100% - 250px - 1.5em"); }
body { width: calc(100% ~"-" 250px ~"-" 1.5em); }

Answer 4

পালিয়ে যাওয়া ক্যালকের ভিতরে ভেরিয়েবলগুলি অন্তর্ভুক্ত করার একটি উত্তম উপায় রয়েছে, যেমনটি এই পোস্টে ব্যাখ্যা করা হয়েছে: CSS3 ক্যালক () ফাংশন কম # 974 নিয়ে কাজ করে না

@variable: 2em;

body{ width: calc(~"100% - @{variable} * 2");}

কোঁকড়া বন্ধনী ব্যবহার করে আপনার পালানোর উদ্ধৃতিগুলি বন্ধ এবং পুনরায় খোলার দরকার নেই।