CSS3 মিডিয়া ক্যোয়ারী সহ সাস ভেরিয়েবলগুলি ব্যবহার করা

Question

আমি @ মিডিয়া প্রশ্নের সাথে সাস ভেরিয়েবলের ব্যবহারটি একত্রিত করার চেষ্টা করছি:

$base_width:1160px;

@media screen and (max-width: 1170px) {$base_width: 960px;}
@media screen and (min-width: 1171px) {$base_width: 1160px;}

$base_width তারপরে তরল লেআউট উত্পাদন করতে স্টাইলশিটের প্রস্থ শতাংশ-ভিত্তিক পরিমাপের বিভিন্ন পয়েন্টে সংজ্ঞায়িত করা হয়।

আমি যখন এটি করি, ভেরিয়েবলটি সঠিকভাবে স্বীকৃত বলে মনে হয় তবে মিডিয়া ক্যোয়ারীর শর্তগুলি নয়। উদাহরণস্বরূপ, উপরের কোডটি স্ক্রিন প্রস্থ নির্বিশেষে একটি 1160px লেআউট উত্পাদন করে। যদি আমি @ মিডিয়ার বিবৃতিগুলি এর মতো ফ্লিপ-ফ্লপ করি:

@media screen and (min-width: 1171px) {$base_width: 1160px;}
@media screen and (max-width: 1170px) {$base_width: 960px;}

এটি স্ক্রিন প্রস্থ নির্বিশেষে আবারও 960px লেআউট উত্পাদন করে। আরও মনে রাখবেন যে আমি যদি এর প্রথম লাইনটি অপসারণ করি তবে $base_width: 1160px;একটি অনির্ধারিত ভেরিয়েবলের জন্য ত্রুটি ফিরে আসে। আমি কি অনুপস্থিত কোন ধারণা?

Comments

সদৃশ stackoverflow.com/questions/40739695/...

— Serkan KONAKCI

Answer 1

এটি সহজভাবে সম্ভব নয়। যেহেতু @media screen and (max-width: 1170px)ট্রিগারটি ক্লায়েন্ট-সাইডে ঘটে।

আপনার প্রত্যাশিত ফলাফল অর্জন কেবলমাত্র তখনই সম্ভব হবে যখন এসএএসএস আপনার স্টাইলশীটের সমস্ত নিয়ম এবং বৈশিষ্ট্যগুলি আপনার $base_widthভেরিয়েবলযুক্ত এবং সেই অনুসারে সেগুলি অনুলিপি / পরিবর্তন করে grab

যেহেতু এটি স্বয়ংক্রিয়ভাবে কাজ করবে না আপনি এটি হাত দ্বারা এটি করতে পারেন:

@media screen and (max-width: 1170px)
      $base_width: 960px // you need to indent it to (re)set it just within this media-query
      // now you copy all the css rules/properties that contain or are relative to $base_width e.g.
      #wrapper
          width: $base_width
          ...

@media screen and (min-width: 1171px)
    $base_width: 1160px
      #wrapper
          width: $base_width
          ...

এটি আসলে DRY নয় তবে আপনি সবচেয়ে ভাল করতে পারেন।

প্রতিবার পরিবর্তনগুলি যদি একই হয় তবে আপনি সমস্ত পরিবর্তিত মানগুলি সহ একটি মেশিনও প্রস্তুত করতে পারেন, সুতরাং আপনার এটি পুনরুক্ত করার প্রয়োজন হবে না। অতিরিক্তভাবে আপনি নির্দিষ্ট পরিবর্তনগুলির সাথে মিশ্রণটি একত্রিত করার চেষ্টা করতে পারেন। ভালো লেগেছে:

@media screen and (min-width: 1171px)
    +base_width_changes(1160px)
    #width-1171-specific-element // additional specific changes, that aren't in the mixin
        display: block

এবং মিক্সিনটি দেখতে এমন হবে

=base_width_changes($base_width)
    #wrapper
        width: $base_width

Comments

এখনও কি এমন পরিস্থিতি রয়েছে যে SASS @ মিডিয়া প্রশ্নের ভিতরে inside ভেরিয়েবলগুলির সাথে কাজ করবে না?

— হ্যাপিটরসো

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

— এরিকোসো

@ এরিকসোকো আমি এর কারণ দেখছি না। SASS সহজেই (?) ভেরিয়েবলের সমস্ত ব্যবহারগুলি ট্র্যাক করতে পারে এবং মিডিয়া কোয়েরিগুলি যেখানে ব্যবহৃত হয় তা sertোকাতে পারে; $foo: 1rem; @media (min-width: 10rem) {$foo: 2rem} .class {font-size: $foo} .class2 {padding: $foo}ফলাফল হবে.class {font-size: 1rem} .class2 {padding: 1rem} @media (min-width: 10rem) (.class {font-size: 2rem} .class2 {padding: 2rem}}

— পাওয়ারবয়

ইয়েপ স্যাস একটি প্রিপ্রোসেসর, "এটি কেবল সম্ভব নয়" এর কোনও কারণ নেই ... এটি এটি করতে পারে, এটি ঠিক বাস্তবায়িত হয় না।

— Ini থেকে

Answer 2

ফিলিপ জেডলারের উত্তরের অনুরূপ, আপনি এটি একটি মিশ্রণ দিয়ে করতে পারেন। এটি যদি আপনি চান তবে একটি একক ফাইলে সবকিছু রাখতে দেয়।

    @mixin styling($base-width) {
        // your SCSS here, e.g.
        #Contents {
            width: $base-width;
        }
    }

    @media screen and (max-width: 1170px) {
        @include styling($base-width: 960px);
    }
    @media screen and (min-width: 1171px) {
        @include styling($base-width: 1160px);
    }

Comments

যত তাড়াতাড়ি বা পরে আপনি এই সমস্যার মুখোমুখি

— হবেন

এই আমার উত্তর চেয়ে ভাল!

— ফিলিপ জেডলার 23'17

এই সমাধানটিকে +1 পছন্দ। এটি একটি মানচিত্রের সাথে সংযুক্ত করুন ( sass-lang.com/docamentation/funitions/map ) এবং আপনি কিছু শক্তি পেয়েছেন - আমি এখানে ব্যাখ্যা করার জন্য একটি পৃথক সমাধান করব। সম্পাদনা: সম্পন্ন হয়েছে। stackoverflow.com/a/56894640/385273

— বেন

Answer 3

সম্পাদনা করুন: দয়া করে এই সমাধানটি ব্যবহার করবেন না। Ronen দ্বারা উত্তর আরও ভাল।

ডিআরওয়াই সমাধান হিসাবে আপনি @importমিডিয়া ক্যোয়ারির অভ্যন্তরে বিবৃতিটি ব্যবহার করতে পারেন , উদাহরণস্বরূপ।

@media screen and (max-width: 1170px) {
    $base_width: 960px;
    @import "responsive_elements";
}
@media screen and (min-width: 1171px) {
    $base_width: 1160px;
    @import "responsive_elements";
}

মিডিয়া ক্যোয়ারিতে সংজ্ঞায়িত ভেরিয়েবলগুলি ব্যবহার করে অন্তর্ভুক্ত করা ফাইলটিতে থাকা সমস্ত প্রতিক্রিয়াশীল উপাদানগুলি আপনি সংজ্ঞায়িত করেন। সুতরাং, আপনাকে যা যা পুনরাবৃত্তি করতে হবে তা হ'ল আমদানি বিবৃতি।

Answer 4

SASS এর মাধ্যমে এটি সম্ভব নয়, তবে CSS ভেরিয়েবল (বা CSS কাস্টম বৈশিষ্ট্য ) দিয়ে এটি সম্ভব । একমাত্র ত্রুটি ব্রাউজার সমর্থন - তবে প্রকৃতপক্ষে একটি পোস্টসিএসএস প্লাগইন রয়েছে - পোস্টসিএসএস-সিএসএস-ভেরিয়েবল - যা সিএসএস ভেরিয়েবলের ব্যবহারকে "চাটু" করে তোলে (এটি আপনাকে পুরানো ব্রাউজারগুলির জন্য সমর্থনও দেয়)।

নিম্নলিখিত উদাহরণটি SASS এর সাথে দুর্দান্ত কাজ করে (এবং পোস্টসিস-সিএসএস-ভেরিয়েবলগুলির সাথে আপনিও পুরানো ব্রাউজারগুলির জন্য সমর্থন পেতে পারেন)।

$mq-laptop: 1440px;
$mq-desktop: 1680px;

:root {
    --font-size-regular: 14px;
    --gutter: 1rem;
}

// The fact that we have to use a `max-width` media query here, so as to not
// overlap with the next media query, is a quirk of postcss-css-variables
@media (min-width: $mq-laptop) and (max-width: $mq-desktop - 1px) {
    :root {
        --font-size-regular: 16px;
        --gutter: 1.5rem;
    }
}

@media (min-width: $mq-desktop) {
    :root {
        --font-size-regular: 18px;
        --gutter: 1.75rem;
    }
}

.my-element {
    font-size: var(--font-size-regular);
    padding: 0 calc(var(--gutter) / 2);
}

এটি নিম্নলিখিত সিএসএসের ফলাফল করবে। পুনরাবৃত্তিমূলক মিডিয়া অনুসন্ধানগুলি ফাইলের আকার বাড়িয়ে তুলবে, তবে আমি পেয়েছি যে ওয়েব সার্ভার প্রয়োগ হওয়ার পরে এটি বৃদ্ধি সাধারণত নগণ্য হয় gzip(এটি সাধারণত স্বয়ংক্রিয়ভাবে হবে)।

.my-element {
  font-size: 14px;
  padding: 0 calc(1rem / 2);
}
@media (min-width: 1680px) {
  .my-element {
  padding: 0 calc(1.75rem / 2);
  }
}
@media (min-width: 1440px) and (max-width: 1679px) {
  .my-element {
  padding: 0 calc(1.5rem / 2);
  }
}
@media (min-width: 1680px) {
  .my-element {
  font-size: 18px;
  }
}
@media (min-width: 1440px) and (max-width: 1679px) {
  .my-element {
  font-size: 16px;
  }
}

Answer 5

@ রোনেনের দুর্দান্ত উত্তর এবং একটি মানচিত্রের সাহায্যে এখানে কিছু বাস্তব শক্তি উপলব্ধ রয়েছে:

    @mixin styling($map) {
        .myDiv {
            background: map-get($map, 'foo');
            font-size: map-get($map, 'bar');
        }
    }

    @media (min-height: 500px) {
        @include styling((
            foo: green,
            bar: 50px
        ));
    }

    @media (min-height: 1000px) {
        @include styling((
            foo: red,
            bar: 100px
        ));
    }

এখন আরও অনেকগুলি ডিআরওয়াই মিডিয়া ক্যোয়ারী .myDivবিভিন্ন মানকে একত্রিত করে লক্ষ্য করা সম্ভব ।

---

মানচিত্র ডক্স: https://sass-lang.com/docamentation/funitions/map

মানচিত্রের ব্যবহারের উদাহরণ: https://www.sitepPoint.com/using-sass-maps/

Comments

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

— জন নিউহাউস

Answer 6

আমারও একই সমস্যা ছিল।

$menu-widthপরিবর্তনশীল উপর 240px হওয়া উচিত মোবাইল দৃশ্য @media only screen and (max-width : 768px)ও 340px ডেস্কটপ দৃশ্য।

সুতরাং আমি কেবল দুটি ভেরিয়েবল তৈরি করেছি:

$menu-width: 340px;
$menu-mobile-width: 240px;

এবং আমি এখানে এটি ব্যবহার করেছি:

.menu {
    width: $menu-width;
    @media only screen and (max-width : 768px) {
      width: $menu-mobile-width;
    }
}

Answer 7

দুটি সুপারিশ

1 আপনার "ডিফল্ট" সিএসএস স্টেটমেন্টগুলি ছোট পর্দার জন্য লিখুন এবং কেবল বৃহত্তর পর্দার জন্য মিডিয়া ক্যোয়ারী ব্যবহার করুন। max-widthমিডিয়া কোয়েরির জন্য সাধারণত প্রয়োজন হয় না ।

উদাহরণ (উপাদানটিকে শ্রেণীর "ধারক" রয়েছে বলে ধরে নেওয়া)

@mixin min-width($width) {
  @media screen and (max-width: $width) {
    @content;
  }
}

.container {
  width: 960px;

  @include min-width(1170px) {
    width: 1160px;
  }
}

2 সমস্যাটি সমাধান করতে সিএসএস ভেরিয়েবল ব্যবহার করুন, যদি পারেন তবে ।

@mixin min-width($width) {
  @media screen and (max-width: $width) {
    @content;
  }
}

:root {
  --container-width: 960px;
  @include min-width(1170px) {
    --container-width: 1160px;
  }
}

.container {
  width: var(--container-width);
}

বিঃদ্রঃ:

যেহেতু এটির 1160px প্রস্থ থাকবে যখন উইন্ডোটির প্রস্থ 1170px হবে, সুতরাং 100% প্রস্থ এবং 1160px সর্বোচ্চ-প্রস্থ ব্যবহার করা ভাল এবং প্যারেন্ট উপাদানটির দৈর্ঘ্য 5px হতে পারে, যতক্ষণ না বক্স-সাইজিংয়ের সম্পত্তিটি বর্ডার-বক্সে সেট করা আছে। সমস্যাটি সমাধান করার অনেকগুলি উপায় রয়েছে। পিতা বা মাতা যদি কোনও ফ্লেক্স বা গ্রিড ধারক না হয় তবে আপনি ব্যবহার করতে পারেন .container { margin: auto }।