কম কম্পন-সিএসএস মেশিনের উদ্দেশ্য কী?

Question

.lib-css()Mixin Magento 2 কম ফাইলের মধ্যে প্রচন্ডভাবে ব্যবহার করা হয়। তবে এর উদ্দেশ্যটি আপাত নয় এবং মিক্সিন সংজ্ঞাগুলি কোনও সহায়ক ডকুমেন্টেশন সরবরাহ করে না:

//
// যে কোনও CSS সম্পত্তি যুক্ত করুন
// ---------------------------------------------

.lib-CSS (
    @_property,
    @_value,
    @_প্রিফিক্স: 0
) কখন (@_প্রিফিক্স = 1)
  এবং না (@_value = '')
  এবং না (@_value = মিথ্যা)
  এবং না (নিষ্ক্রিয় (@_ মান, 1) = মিথ্যা)
  এবং না (নিষ্ক্রিয় (@_ মান, 2) = মিথ্যা)
  এবং না (এক্সট্র্যাক্ট (@_ মান, 3) = মিথ্যা)
  এবং না (নিষ্কাশন (@_ মান, 4) = মিথ্যা)
  এবং না (নিষ্ক্রিয় (@_ মান, 5) = মিথ্যা) {
  -উইবকিট - @ {_ সম্পত্তি}: @_value;
       -মোজ - @ {_ সম্পত্তি}: @_মূল্য;
        -ms - @ {_ সম্পত্তি}: @_মূল্য;
}

.lib-CSS (
    @_property,
    @_value,
    @_প্রিফিক্স: 0
) যখন না (@_value = '')
  এবং না (@_value = মিথ্যা)
  এবং না (নিষ্ক্রিয় (@_ মান, 1) = মিথ্যা)
  এবং না (নিষ্ক্রিয় (@_ মান, 2) = মিথ্যা)
  এবং না (এক্সট্র্যাক্ট (@_ মান, 3) = মিথ্যা)
  এবং না (নিষ্কাশন (@_ মান, 4) = মিথ্যা)
  এবং না (নিষ্ক্রিয় (@_ মান, 5) = মিথ্যা) {
    @{_সম্পদের মূল্য;
}

আমি দেখতে পেলাম যে আপনি কেন রক্তপাত প্রান্তের সিএসএস বৈশিষ্ট্যগুলিতে বিক্রেতার উপসর্গ যুক্ত করতে মিক্সিনটি ব্যবহার করতে চান (যদিও এমন কয়েকটি বৈশিষ্ট্য রয়েছে যেখানে এটির আর প্রয়োজন হয়) তবে এই মিক্সিনটি ব্যবহার করে সাধারণ সিএসএস বৈশিষ্ট্যগুলি আউটপুট দেওয়ার কারণ স্পষ্ট নয় is কেউ কি এ বিষয়ে আলোকপাত করতে পারেন?

Comments

আমি একই জিনিসটি ভাবছি, ম্যাজেন্টোর কোডের মধ্যে এটি বেমানান বলে মনে হচ্ছে। উদাহরণস্বরূপ, যেখানে ব্যাকগ্রাউন্ডটি একটি ভেরিয়েবলের সাথে ঘোষিত হয় তারা কখনও কখনও .lib-css ব্যবহার করে এবং কখনও কখনও তারা ব্যবহার করে না, এমনকি একই ফাইলের মধ্যেও।

— বেন ক্রুক

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

— সার্কেলিক্স

অটোপ্রিফিক্স শীতল ধারণা ছিল না?

— লরেঞ্জো

Answer 1

আমি দেখতে পাচ্ছি কেবলমাত্র ব্যবহারগুলি হ'ল উপসর্গগুলি এবং পূর্বে ঘোষিত নিয়মগুলি সরানো:

উপসর্গ

body {
    .lib-css(transition, color .5s ease, @_prefix: 1);
}

আউটপুট দেবে:

body {
    webkit-transition: color 0.5s ease;
    -moz-transition: color 0.5s ease;
    -ms-transition: color 0.5s ease;
    transition: color 0.5s ease;
}

পূর্বে ঘোষিত নিয়মগুলি আনসেট না করে সরিয়ে ফেলা হচ্ছে

.lib-css()এগুলি সেট না করে 0বা সেগুলিতে সেট করার পরিবর্তে নির্দিষ্ট নিয়ম পরিবর্তন করার জন্য প্রতিটি নিয়ম সরিয়ে দেওয়ার ক্ষমতা দেয় none। উদাহরণস্বরূপ বলতে দিন যে আমরা ব্যবহার করি এমন প্রতিটি বিধি মুছে ফেলতে চাই @button__shadow। যেমন:

.product-list button {
    .lib-css(box-shadow, @button__shadow);
}

যদি এক উপাদান কেবল ছিল লিখতে সহজ হবে box-shadow: none;। তবে এটি যদি 20 টি উপাদান বলে থাকে তবে এগুলি সমস্তরূপে সরিয়ে ফেলা দ্রুত হবে:

@button__shadow: false;

এতে @variable: noneকোড যুক্ত করার সাথে সাথে আরও যুক্ত করার পরিবর্তে হ্রাস করার কারণে এটির ব্যবহারের অতিরিক্ত সুবিধা রয়েছে ।

সুতরাং এই দুটি পদ্ধতির তুলনা করুন:

কম

.product-list button {
    .lib-css(box-shadow, @button__shadow);
}

.product-list button {
    box-shadow: none;
}

// Or alternatively

@button__shadow: 0;

আউটপুট

কম

@button__shadow: false;

.product-list button {
    .lib-css(box-shadow, @button__shadow);
}

আউটপুট

কোনও আউটপুট নেই, বিধিগুলি প্রক্রিয়াজাত হয় না

এটি একটি ভাল ধারণা বলে মনে হচ্ছে তবে ব্যবহারের ক্ষেত্রেগুলি খুব ছোট বলে মনে হচ্ছে। আমি সম্ভবত এটি উপসর্গগুলির জন্য ব্যবহার করব। @variable: falseস্থানীয়ভাবে সেট করা গেলে এটি আরও বেশি কার্যকর হবে, উদাহরণস্বরূপ কেবলমাত্র এক ডিভের মধ্যে, দুর্ভাগ্যক্রমে আমি এই কাজটি করতে পারিনি।

মূল ব্যবহার

আমি লক্ষ্য করেছি যে কিছু ভেরিয়েবলগুলি ডিফল্টরূপে মিথ্যাতে সেট করা থাকে যেমন এর মধ্যে রয়েছে lib/web/css/source/lib/variables/_buttons.less, আমি মনে করি এটি এটি তাই যাতে প্রয়োজন অনুযায়ী আউটপুট করা হয় না। এছাড়াও একটি ভাল ধারণা।

//  Default = secondary button
@button__color: @primary__color;
@button__background: @color-gray95;
@button__border: 1px solid @color-gray-darken2;
@button__gradient-color-start: false;
@button__gradient-color-end: false;

Answer 2

.Lib-CSS () mixin যদি একটি পরিবর্তনশীল দ্বারা এটি পাস একটি মান কোন CSS সম্পত্তি সেট করতে ব্যবহৃত হয়। (যেমন)

[![.class {
    .lib-css(border-radius, @button__border-radius);
    .lib-css(border, @button-primary__border);
    .lib-css(color, @button-primary__color);
    .lib-css(background, @color-gray94);
    .lib-css(padding, @indent__s);
}

এছাড়াও .lib-CSS () যোগ করতে পারেন -ms-, -webkit- এবং -moz- উপসর্গ প্রয়োজনে।

যদি ভেরিয়েবলটি মিথ্যাতে সেট করা থাকে তবে .lib-css () মিশ্রন কোডটিতে কিছুই যোগ করবে না।

.lib-CSS ভেরিয়েবলগুলি পর্যালোচনা করুন

এছাড়াও আপনি এর অধীনে সমস্ত কম সহায়তা পেতে পারেন

<magento install directory>\lib\web\css\docs\utilities.html

Comments

আপনার উত্তরের জন্য ধন্যবাদ, তবে এটি কেন এখনও তা স্পষ্ট নয়: এর .lib-css(border-radius, @button__border-radius); চেয়ে আরও ভাল কিছু হবে: border-radius: @button__border-radius;

— এরিক হ্যানসেন

এছাড়াও আপনি সরাসরি সিএসএস সম্পত্তি এবং এই .lib-css (সীমানা-ব্যাসার্ধ, 5px) এর মতো মান লিখতে পারেন;

— সতীশ রানা