সাস নেতিবাচক পরিবর্তনশীল মান?

Question

আমার বেশ কয়েকটি স্ক্যাস সিলেক্টর রয়েছে যেখানে আমি একই পরিমাণে ইতিবাচক এবং নেতিবাচক ব্যবহার করি, যেমন:

padding: 0 15px 15px;
margin: 0 -15px 20px -15px;

আমি সমস্ত 15px পরিমাণের জন্য একটি ভেরিয়েবল ব্যবহার করতে পছন্দ করব, তবে এটি কার্যকর হয় না:

$pad: 15px;
padding: 0 $pad $pad;
margin: 0 -$pad 20px -$pad;

মার্জিনের পরিমাণগুলি ধনাত্মক সংখ্যায় রূপান্তর করে। আমি কিছু অনুপস্থিত করছি?

Answer 1

এটি চেষ্টা করুন

margin: 0 (-$pad) 20px (-$pad);

Comments

স্বয়ংক্রিয়ভাবে এই পদ্ধতির চেষ্টা করেছে - ক্যালক ফাংশন ব্যবহার করার সময় কাজ করছে না বলে মনে হচ্ছে। সম্পাদনা: দেখে মনে হচ্ছে ক্যালক ব্যবহার করার সময় আপনার প্রথম বন্ধনী ব্যবহার করার দরকার নেই, তবে আপনাকে স্ট্যাকওভারফ্লো.com

— কেভিন

Answer 2

সাস গাইডলাইন অনুযায়ী আরও বুদ্ধিমান সমাধান interpolateনীচের উদাহরণের মতো ভেরিয়েবলগুলিতে হবে :

margin: 0 -#{$pad} 20px -#{$pad};

একটি উদাহরণ: https://www.sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293

Comments

: @Green আপনি সর্বদা উদাহরণ লিংক পরীক্ষা করতে পারবেন sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293

— Vangel Tzo

Answer 3

আমি পূর্ববর্তী দুটি উত্তর বিবেচনা করে আমার দ্বি-পেনিথ যুক্ত করছি, তবে তারপরে এটি (জোর দেওয়া আমার) পড়া:

আপনার বিশেষত ইন্টারপোলেশন পছন্দ করা এড়ানো#{$number}px উচিত । এটি আসলে একটি সংখ্যা তৈরি করে না! এটি একটি অনাবৃত স্ট্রিং তৈরি করে যা একটি সংখ্যার মতো দেখতে লাগে তবে কোনও সংখ্যার ক্রিয়াকলাপ বা ফাংশন নিয়ে কাজ করে না। আপনার গণিতকে ইউনিট-পরিষ্কার করার চেষ্টা করুন যাতে $numberইতিমধ্যে ইউনিট রয়েছে pxবা লিখুন $number * 1px।

উৎস

সুতরাং আমি বিশ্বাস করি সঠিক উপায়টি নীচের মত হবে যা SASS / SCSS এর গাণিতিক দক্ষতা সংরক্ষণ করে:

$pad: 15px;
padding: 0 $pad $pad;
margin: 0 $pad*-1 20px $pad*-1;

Comments

প্রথম নজরে, এটি নিট-পিকিং (আপনার উত্তর) বলে মনে হচ্ছে, তবে দ্বিতীয় নজরে এটি সত্যই উত্তম উত্তর। সর্বোপরি, চলকটি যদি নেতিবাচক পরিবর্তনশীল হয়ে যায় তবে উত্তরটি ইতিবাচক হয়! $ প্যাড: -2rem; ... মার্জিন: 0 - # {$ প্যাড}; // মার্জিনে পরিণত হয়: 0 --2rem; মার্জিন: 0 $ প্যাড * -1; // মার্জিন হয়ে যায়: 0 2rem;

— ফনর্ডিয়াস