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


107

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

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

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

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

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

উত্তর:


215

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

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

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

27

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

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

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


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

2

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

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

উৎস

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

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

প্রথম নজরে, এটি নিট-পিকিং (আপনার উত্তর) বলে মনে হচ্ছে, তবে দ্বিতীয় নজরে এটি সত্যই উত্তম উত্তর। সর্বোপরি, চলকটি যদি নেতিবাচক পরিবর্তনশীল হয়ে যায় তবে উত্তরটি ইতিবাচক হয়! $ প্যাড: -2rem; ... মার্জিন: 0 - # {$ প্যাড}; // মার্জিনে পরিণত হয়: 0 --2rem; মার্জিন: 0 $ প্যাড * -1; // মার্জিন হয়ে যায়: 0 2rem;
ফনর্ডিয়াস
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.