সাস গণনা শতাংশ বিয়োগ পিক্স

Question

আমি নিম্নলিখিতগুলি করতে সক্ষম হতে চাই:

height: 25% - 5px;

স্পষ্টতই যখন আমি এটি করি তখন আমি ত্রুটিটি পাই:

Incompatible units: 'px' and '%'.

Comments

আমি Invalid property valueত্রুটি পেয়েছি । ক্রোমের ক্যানারি বিল্ড সহ প্রতিটি ব্রাউজারে।

— মাইক ফিল্ডেন

যদি কোনও সাস ফাংশন থাকে যা আমাকে কী শীতল করতে চাই তা পেতে, আমি কেবল খেলছিলাম calc...

— মাইক ফিল্ডেন

হ্যাঁ :) যেমন আমি বলেছিলাম যে আমি calcআগে গিয়েছিলাম এবং এটি কাজ করে না তবে কীভাবে এটি সম্পন্ন হয় তা যত্নশীল নই। দেখে মনে হচ্ছে এটি calcআমার ব্রাউজারগুলির কোনওর মতোই কাজ করে না, সুতরাং সাস বাস্তবায়নই আমার ধারণা ভাল।

— মাইক ফিল্ডেন

সাস ক্যালকের জন্য পলিফিল হিসাবে কাজ করতে পারে না ()। এটি 25% পিএক্স এ কীভাবে রূপান্তর করতে পারে তা জানে না যাতে এটি গণিত করতে পারে এবং সিএসএস তৈরি করতে পারে। আপনার যথাযথ প্রয়োজনের উপর নির্ভর করে বিকল্প থাকতে পারে যেমন ডিসপ্লে-টেবিল পরিবার ব্যবহার করা, আপনার বাক্স-আকার পরিবর্তন করা বা নেতিবাচক মার্জিনগুলি ব্যবহার করা ( jsfiddle.net/5JZGt )

— সিম্যানন

Answer 1

সাস একটি মান থেকে অন্য ইউনিটে রূপান্তর করতে পারে না এমন মানগুলিতে পাটিগণিত সম্পাদন করতে পারে না। পিক্সেল বা অন্য কোনও ইউনিটের ক্ষেত্রে "100%" কতটা প্রশস্ত তা সাসের জানার উপায় নেই। এটি কেবল ব্রাউজারই জানে।

calc()পরিবর্তে আপনার প্রয়োজন । আমি কি ব্যবহার করতে পারি ... এ ব্রাউজারের সামঞ্জস্যতা পরীক্ষা করুন

.foo {
    height: calc(25% - 5px);
}

যদি আপনার মানগুলি ভেরিয়েবলগুলিতে থাকে তবে আপনার প্রয়োজন হতে পারে দ্রাবক সেগুলি স্ট্রিংগুলিতে পরিণত করুন (অন্যথায় সাস কেবল গাণিতিক সম্পাদন করার চেষ্টা করে):

$a: 25%;
$b: 5px;

.foo {
  width: calc(#{$a} - #{$b});
}

Comments

আমি বলব ক্যালক () বেশিরভাগ ব্রাউজারে মোটেই কাজ করে না। মোবাইল প্ল্যাটফর্মগুলি ডেস্কটপগুলির মতোই গুরুত্বপূর্ণ।

— ডালগার্ড

কোনও যুক্তি নেই, তবে ব্রাউজারগুলি গণনা করুন! না চেয়ে আরও বেশি সমর্থন ক্যালক () এবং আরও বেশি এটি অদূর ভবিষ্যতে সমর্থন করবে!

— ক্রিসগনজালেজ

আমি Calc ফাংশন ভিতরে একটি পরিবর্তনশীল ব্যবহার প্রস্থ বিষয় ছিল, কিন্তু এখানে পাওয়া গেছে: stackoverflow.com/questions/13542164/... আমি ভালো পরিবর্তনশীল রেফারেন্স পারে যে: calc(25% - #{$var})।

— mlunoe

বিদ্যমান, প্রকাশিত ব্রাউজারগুলির ক্ষেত্রে @ ডালগার্ডের বক্তব্য অনুসরণ করতে ক্যালক এতে কাজ করার চেয়ে বেশি কাজ করে না See দেখুন: caniuse.com/#search=calc

— ২২ শে

আপনি সর্বদা যোগ করে পড়ে ফিরে বিকল্প ব্যবহার করতে পারেন width: 22%সর্বোপরি এ widthসঙ্গে গুলিcalc

— Hengjie

Answer 2

calcএসসিএসএস [সংকলন-সময়] এবং সিএসএস [রান-টাইম] উভয় ক্ষেত্রেই একটি ফাংশন রয়েছে। আপনি সম্ভবত পরবর্তীটির পরিবর্তে প্রাক্তনকে অনুরোধ করছেন।

সুস্পষ্ট কারণে মিশ্রণ ইউনিটগুলি সংকলন-সময় কাজ করবে না, তবে রান-টাইমে হবে।

আপনি unquoteএকটি এসসিএসএস ফাংশন ব্যবহার করে পরবর্তীকে জোর করতে পারেন ।

.selector { height: unquote("-webkit-calc(100% - 40px)"); }

Answer 3

$var:25%;
$foo:5px;
.selector {
    height:unquote("calc( #{$var} - #{$foo} )");
}

Comments

এই প্রশ্নের উত্তর পোস্ট করার জন্য আপনাকে ধন্যবাদ! কোড-কেবলমাত্র উত্তর স্ট্যাক ওভারফ্লোতে নিরুৎসাহিত করা হয়েছে, কারণ কোনও প্রসঙ্গবিহীন কোড ডাম্প সমাধানটি কীভাবে বা কীভাবে কাজ করবে তা ব্যাখ্যা করে না, মূল পোস্টার (বা ভবিষ্যতের কোনও পাঠক) এর পিছনে যুক্তি বুঝতে অসুবিধা তৈরি করে। দয়া করে আপনার প্রশ্নটি সম্পাদনা করুন এবং আপনার কোডের একটি ব্যাখ্যা অন্তর্ভুক্ত করুন যাতে অন্যরা আপনার উত্তর থেকে উপকৃত হতে পারে। ধন্যবাদ!

— ম্যাক্সিমিলিয়ান ল্যামিস্টার

এটা আমাকে বাঁচিয়েছে প্রস্থ: আনকোট ("ক্যালক (100% - # {$ বামনাভ-প্রস্থ})");

— httpste

Answer 4

যদি আপনি ধারকটির প্রস্থ জানেন তবে আপনি এটি করতে পারেন:

#container
  width: #{200}px
  #element
    width: #{(0.25 * 200) - 5}px

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

Answer 5

পুরানো থ্রেডটি পুনরজ্জীবিত করার জন্য দুঃখিত - একটি কম্পাসের সাথে প্রসারিত: সিউডো-সিলেক্টরের পরে আপনার উদ্দেশ্য অনুসারে হতে পারে - যেমন। আপনি যদি স্ক্রিনের বাম থেকে (50% + 10px) প্রস্থ পূরণ করতে একটি ডিভিও চান তবে আপনি ব্যবহার করতে পারেন (এসএএসএস ইনডেন্ট সিনট্যাক্সে):

.example
    background: red
    +stretch(0, -10px, 0, 0)
    &:after
        +stretch(0, 0, 0, 50%)
        content: ' '
        background: blue

এর: উপাদানটি .example এর ডান দিকে 50% পূরণ করে (.xample এর প্রস্থের জন্য 50% উপলব্ধ রেখে), তারপর। নমুনাটি প্রস্থটি 10px পর্যন্ত প্রসারিত করা হয়।

Comments

এর জন্য কোথাও কম বা সাস মেশানো আছে? গণনা মোটেও খুব ভাল কাজ করে না বলে মনে হচ্ছে।

— v3nt

Answer 6

কেবলমাত্র ভেরিয়েবলের মধ্যে শতাংশের মান যুক্ত করুন এবং #{$variable} উদাহরণস্বরূপ ব্যবহার করুন

$twentyFivePercent:25%;
.selector {
    height: calc(#{$twentyFivePercent} - 5px);
}