সাসে @ অন্তর্ভুক্ত বনাম @ এক্সটেন্ড ব্যবহার করছেন?

Question 1

সাসে, আমি @includeমিক্সিন ব্যবহার করে @extendএবং একটি স্থানধারক শ্রেণীর সাথে ব্যবহারের মধ্যে পার্থক্যটি বেশ বুঝতে পারি না । তারা কি একই জিনিস পরিমাণ না?

Question 2

প্রসারিতগুলি কাস্টমাইজেশনের অনুমতি দেয় না তবে তারা খুব দক্ষ সিএসএস তৈরি করে।

%button
  background-color: lightgrey
  &:hover, &:active
    background-color: white

a
  @extend %button

button
  @extend %button

ফলাফল:

a, button {
  background-color: lightgrey;
}
a:hover, button:hover, a:active, button:active {
  background-color: white;
}

মিশ্রণগুলি সহ, আপনি সদৃশ সিএসএস পাবেন তবে প্রতিটি ব্যবহারের জন্য ফলাফলটি পরিবর্তন করতে আপনি যুক্তি ব্যবহার করতে পারেন।

=button($main-color: lightgrey, $active-color: white)
  background-color: $main-color
  border: 1px solid black
  border-radius: 0.2em

  &:hover, &:active
    background-color: $active-color

a
  +button

button
  +button(pink, red)

ফলাফল স্বরূপ:

a {
  background-color: lightgrey;
  border: 1px solid black;
  border-radius: 0.2em;
}
a:hover, a:active {
  background-color: white;
}

button {
  background-color: pink;
  border: 1px solid black;
  border-radius: 0.2em;
}
button:hover, button:active {
  background-color: red;
}

আপনি কার্যকরভাবে প্রসারিত এবং মিশ্রণগুলি ব্যবহার করে কীভাবে আপনার কোডটি ক্লিনার এবং আরও রক্ষণাবেক্ষণযোগ্য করতে পারেন তা দেখার জন্য এই ক্রমাগত কোড উদাহরণগুলি অনুসরণ করুন: http://thecodingdesigner.com/posts/balancing

দ্রষ্টব্য যে SASS দুর্ভাগ্যক্রমে মিডিয়া প্রশ্নের ভিতরে প্রসারিত ব্যবহারের অনুমতি দেয় না (এবং উপরের লিঙ্কটির সাথে সম্পর্কিত উদাহরণটি ভুল)। মিডিয়া প্রশ্নের উপর ভিত্তি করে আপনার প্রসারিত করতে হবে এমন পরিস্থিতিতে মিক্সিন ব্যবহার করুন:

=active
  display: block
  background-color: pink

%active
  +active

#main-menu
  @extend %active // Active by default

#secondary-menu
  @media (min-width: 20em)
    +active // Active only on wide screens

ফলাফল:

#main-menu {
  display: block;
  background-color: pink;
}

@media (min-width: 20em) {
  #secondary-menu {
    display: block;
    background-color: pink;
  }
}

এই ক্ষেত্রে সদৃশ অনিবার্য, তবে আপনার এটি সম্পর্কে খুব বেশি যত্ন নেওয়া উচিত নয় কারণ ওয়েব সার্ভারের জিজপ সংক্ষেপণ এটি যত্ন নেবে।

পিএস নোট করুন যে আপনি মিডিয়া প্রশ্নের মধ্যে স্থানধারক ক্লাস ঘোষণা করতে পারেন।

আপডেট 2014-12-28 : প্রসারিতগুলি মিক্সিনগুলির তুলনায় আরও কমপ্যাক্ট সিএসএস উত্পাদন করে , তবে সিএসএস জিজেপ করা হলে এই সুবিধা হ্রাস পাবে। আপনার সার্ভারে gzipped সিএসএস (এটা সত্যিই উচিত!) করে তোলে, তাহলে প্রসারিত আপনি প্রায় কোন লাভ দেব। সুতরাং আপনি সর্বদা মিক্সিন ব্যবহার করতে পারেন ! এই এখানে আরও: http://www.sitepoint.com/sass-extend-nobody-told-you/

Question 3

উভয়টি ব্যবহার করা ভাল - একটি মিক্সিন তৈরি করুন যা আপনাকে প্রচুর কাস্টমাইজেশনের অনুমতি দেবে এবং তারপরে সেই মিশ্রণের সাধারণ কনফিগারেশনের জন্য প্রসারিত করবে। উদাহরণস্বরূপ (এসসিএসএস সিনট্যাক্স):

@mixin my-button($size: 15, $color: red) {
  @include inline-block;
  @include border-radius(5px);
  font-size: $size + px;
  background-color: $color;
}
%button {
  @include my-button;
}
%alt-button {
  @include my-button(15, green);
}
%big-button {
  @include my-button(25);
}

এটি আপনাকে বারবার মাই-বোতামের মিশ্রণটি কল করা থেকে বাঁচায়। এর অর্থ এটিও হ'ল সাধারণ বোতামগুলির জন্য আপনাকে সেটিংস মনে রাখতে হবে না তবে আপনার বেছে নিতে হবে এমন একটি সুপার অনন্য, এক-অফ বোতামটি তৈরি করার ক্ষমতা এখনও রয়েছে।

আমি এই উদাহরণটি একটি ব্লগ পোস্ট থেকে লিখেছি যা আমি খুব বেশি আগে লিখেছিলাম । আশাকরি এটা সাহায্য করবে.

Question 4

আমার মতে প্রসারিতগুলি খাঁটি মন্দ এবং এড়ানো উচিত। এখানে কেন:

scss দেওয়া:

%mystyle {color: blue;}
.mystyle-class {@extend %mystyle}
//basically anything not understood by target browser (such as :last-child in IE8):
::-webkit-input-placeholder {@extend %mystyle}

নিম্নলিখিত সিএসএস উত্পন্ন করা হবে:

.mystyle-class, ::-webkit-input-placeholder { //invalid in non-webkit browsers
  color: blue;
}

যখন কোনও ব্রাউজার কোনও নির্বাচককে বোঝে না, এটি নির্বাচকদের পুরো লাইনকে অবৈধ করে দেয়। এর অর্থ হল যে আপনার মূল্যবান মাইস্টাইল-শ্রেণি আর নীল নয় (অনেক ব্রাউজারের জন্য)। এটার আসল অর্থ কী? যে কোনও সময় আপনি যদি এমন কোনও প্রসার ব্যবহার করেন যেখানে কোনও ব্রাউজার নির্বাচককে বুঝতে না পারে সেই প্রসারের প্রতিটি অন্যান্য ব্যবহার অবৈধ হয়ে যাবে। এই আচরণটি মন্দ বাসা বাঁধার জন্যও অনুমতি দেয়:

%mystyle {color: blue;}
@mixin mystyle-mixin {@extend %mystyle; height: 0;}
::-webkit-input-placeholder {@include mystyle-mixin} 
//you thought nesting in a mixin would make it safe?
.mystyle-class {@extend %mystyle;}

ফলাফল:

::-webkit-input-placeholder, .mystyle-class { //invalid in non-webkit browsers
  color: blue;
}

::-webkit-input-placeholder {
  height: 0;
}

টিএল। আপনি যদি এটি করেন তবে হঠাৎই আপনি যেখানেই এটি ব্যবহার করেছেন শৈলীগুলি ছিন্ন করে দেবে। পরিবর্তে মিক্সিনগুলির উপর নির্ভর করার চেষ্টা করুন!

Question 5

মিশ্রণগুলি ব্যবহার করুন যদি এটি কোনও পরামিতি গ্রহণ করে, যেখানে আপনি এতে যা পাস তার উপর নির্ভর করে সংকলিত আউটপুট পরিবর্তিত হবে।

@include opacity(0.1);

স্টাইলগুলির যে কোনও স্থির পুনরাবৃত্তিযোগ্য ব্লকের জন্য প্রসারিত (স্থানধারক সহ) ব্যবহার করুন ।

color: blue;
font-weight: bold;
font-size: 2em;

Question 6

আমি d4nyll দ্বারা পূর্ববর্তী উত্তরের সাথে পুরোপুরি একমত। নেই একটি টেক্সট সম্পর্কে বিকল্প প্রসারিত এবং যখন আমি এই থিম অনুসন্ধান করছিলাম আমি অভিযোগ অনেকটা সম্পর্কে, প্রসারিত তাই শুধু মন আছে এবং যদি পরিবর্তে mixin ব্যবহার প্রসারিত করতে একটি সম্ভাবনা, শুধু লাফালাফি প্রসারিত পাওয়া যায় নি।