Alচ্ছিক আর্গুমেন্টের সাথে সাস মিক্সিন তৈরি করা

Question

আমি এইভাবে একটি মিশ্রণ লিখছি:

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
    -webkit-box-shadow: $top $left $blur $color $inset;
    -moz-box-shadow: $top $left $blur $color $inset;
    box-shadow: $top $left $blur $color $inset;
}

যখন আমি সত্যই যা চাই তা হ'ল কোনও $insetমান পাস না করা হলে কোনও কিছুই আউটপুট হয় না, বরং এটি এরকম কিছু সংকলন করার চেয়ে:

-webkit-box-shadow: 2px 2px 5px #555555 "";
-moz-box-shadow: 2px 2px 5px #555555 "";
box-shadow: 2px 2px 5px #555555 "";

আমি মিক্সিনটি কীভাবে পুনর্লিখন করব যাতে $insetপাসের মান না থাকলে কিছুই আউটপুট হয় না?

Comments

এটি লজ্জাজনক যে SASS এর কোনও মূল্য blankবা nilমূল্য নেই।

— জোশুয়া পিন্টার

বিটিডাব্লু, অন্য একটি SASS সীমাবদ্ধতার দিকে তাকানোর সময়, আমি এই পরিস্থিতিতে উদ্ধৃতিগুলি থেকে মুক্তি পাওয়ার জন্য একটি দুর্দান্ত উপায় পেয়েছি across আমি এর জন্য একটি উত্তর যুক্ত করেছি।

— জোশুয়া পিন্টার

এখন ২০১৫ সালে আপনি কেবলমাত্র nullএন্ট্রি / প্রোপ এড়িয়ে যেতে ব্যবহার করতে পারেন । ie @include box-shadow($top, $left, $blur, $color, null)

— ড্রপ

Answer 1

এটি করার একটি DRY'r উপায়

এবং, সাধারণত, উদ্ধৃতিগুলি অপসারণ করার জন্য একটি ঝরঝরে কৌশল।

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow: $top $left $blur $color #{$inset};
  -moz-box-shadow:    $top $left $blur $color #{$inset};
  box-shadow:         $top $left $blur $color #{$inset};
}

SASS সংস্করণ 3+, আপনি ব্যবহার করতে পারেন unquote():

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow: $top $left $blur $color unquote($inset);
  -moz-box-shadow:    $top $left $blur $color unquote($inset);
  box-shadow:         $top $left $blur $color unquote($inset);
} 

এটিকে এখানে তুলে নেওয়া হয়েছে: SASS এর সাথে একক যুক্তি হিসাবে একটি মিশিনে একটি তালিকা দিন

Comments

বব সমারস যেমন উল্লেখ করেছেন, SASS এর নতুন সংস্করণে আপনি উদ্ধৃতিগুলি অপসারণের জন্য # {instead এর পরিবর্তে আনকোট () পদ্ধতিটিও ব্যবহার করতে পারেন। চিয়ার্স।

— জোশুয়া পিন্টার

সবচেয়ে সহজ উপায় হ'ল nullপরিবর্তে alচ্ছিক পরামিতিগুলির ডিফল্ট মানের জন্য ব্যবহার করা ""এবং সেগুলি আউটপুটে রেন্ডার হবে না! @mixin box-shadow($top, $left,... , $inset:null) {}

— এসস্পার্পোশন

@ S.Serpooshan আমি জানতে আগ্রহী কি সংস্করণ এই সংযোজন করা হয়েছিল আছি এটি অবশ্যই 2012 সালে ফিরে সমর্থিত হয় না।

— জশুয়া পিন্টার

Answer 2

একটি খুব ভাল DRY উপায়

পাস $args...করতে হয় @mixin। এইভাবে, $argsআপনি কতই না পাস করবেন তা বিবেচনা করুন। ইন @inputকল, আপনি সমস্ত args প্রয়োজন পাস করতে পারেন। তাই ভালো:

@mixin box-shadow($args...) {
  -webkit-box-shadow: $args;
  -moz-box-shadow: $args;
  box-shadow: $args;
}

এবং এখন আপনি প্রয়োজনীয় সমস্ত আর্গগুলি পাস করে আপনি চান এমন প্রতিটি শ্রেণিতে আপনার বাক্স-ছায়া পুনরায় ব্যবহার করতে পারেন:

.my-box-shadow {
  @include box-shadow(2px 2px 5px #555, inset 0 0 0);
}

Comments

ভালো জানেন কিন্তু প্রায়ই বার যে এটা ইঙ্গিত কি আর্গুমেন্ট আরও পরিষ্কার mixinআশা করছে, মত $top, $left, $blur, ইত্যাদি চলক আর্গুমেন্ট, আপনি দেখিয়েছেন মতো চূড়ান্ত নমনীয়তার জন্য মহান, যদিও।

— জোশুয়া পিন্টার

ধন্যবাদ, দোস্ত এটা আমাকে অনেক সাহায্য করে

— নীলেশ সুতার

Answer 3

সাস @ifবিবৃতি সমর্থন করে । ( ডকুমেন্টেশন দেখুন ।)

আপনি আপনার মিশ্রণটি এভাবে লিখতে পারেন:

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  @if $inset != "" {
    -webkit-box-shadow:$top $left $blur $color $inset;
    -moz-box-shadow:$top $left $blur $color $inset;
    box-shadow:$top $left $blur $color $inset;
  }
}

Comments

এটি এখানে দরকারী নয়, কেবল insetঅংশটি শূন্য হলে অবশ্যই বাদ দিতে হবে, সমস্ত বাক্স-ছায়ার বৈশিষ্ট্য নয়

— এস.স্পার্পোশন

@ এস। সরপুশন শুধু একটি যুক্ত করুন elseএবং ভিতরে থাকা সমস্ত অ-ইনসেট বৈশিষ্ট্য অন্তর্ভুক্ত করুন।

— mbomb007

@ mbomb007 আমি জানি, আমি এই সমাধানটি নিয়ে কেবল একটি সমস্যার প্রতিবেদন করছি। এবং উপরে প্রদত্ত অন্যান্য উত্তরগুলি একেবারে ভাল।

— এসস্পার্পোশান

Answer 4

আপনি সম্পত্তিটিকে নাল দিয়ে একটি ডিফল্ট মান হিসাবে রাখতে পারেন এবং আপনি যদি পরামিতিটি পাস না করেন তবে এটি ব্যাখ্যা করা হবে না।

@mixin box-shadow($top, $left, $blur, $color, $inset:null) {
  -webkit-box-shadow: $top $left $blur $color $inset;
  -moz-box-shadow:    $top $left $blur $color $inset;
  box-shadow:         $top $left $blur $color $inset;
}

এর অর্থ আপনি অন্তর্ভুক্ত বিবৃতিটি এভাবে লিখতে পারেন।

@include box-shadow($top, $left, $blur, $color);

পরিবর্তে এটি লিখতে।

@include box-shadow($top, $left, $blur, $color, null);

যেমন উত্তর এখানে দেখানো হয়েছে

Comments

এই উত্তরটি অফার কিছুই বিদ্যমান উত্তর উপর নতুন (দেখুন: stackoverflow.com/a/23565388/1652962 )

— cimmanon

@ সিমানম্যান বিপরীতে, এটি অতিরিক্ত ইউটিলিটি সরবরাহ করে কারণ আপনি তার @include box-shadow($top, $left, $blur, $color);পরিবর্তে আমদানিটি লিখতে পারেন @include box-shadow($top, $left, $blur, $color, null);। অতএব এই উত্তরটি আরও অনেক সার্থক।

— ড্যান

@ ড্যান প্রকৃতপক্ষে আপনি সেভাবে এটি পাঠযোগ্যতা হারাবেন, সুতরাং যুক্তিযুক্তভাবে এটি যে উত্তরটি পেয়েছে তার চেয়ে কম উপকারী

— টাইলার এইচ

@ টাইলারহহ এটি সত্য

— ড্যান

Answer 5

পুরানো প্রশ্ন, আমি জানি, তবে আমি মনে করি এটি এখনও প্রাসঙ্গিক। তর্কযুক্তভাবে, এটি করার একটি সুস্পষ্ট উপায় হ'ল আনকোট () ফাংশন (যা এসএএসএস-এর সংস্করণ ৩.০.০ থেকে রয়েছে) ব্যবহার করা:

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow: $top $left $blur $color unquote($inset);
  -moz-box-shadow: $top $left $blur $color unquote($inset);
  box-shadow: $top $left $blur $color unquote($inset);
}

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

Answer 6

আমি জানি এটির সঠিক উত্তরটি আপনি অনুসন্ধান করছেন না তবে মিশ্রনের "null"সময় আপনি এই হিসাবে শেষ যুক্তি হিসাবে পাস করতে পারবেন @include box-shadow, @include box-shadow(12px, 14px, 2px, green, null);এখনকার মতো যদি সেই যুক্তিটি সেই সম্পত্তির চেয়ে একটি সম্পত্তির (এবং এর (ডিফল্ট) মান) সংকলন না করে তবে । যদি সেই "রেখায়" কেবলমাত্র দুটি বা আরও বেশি আরগ থাকে তবে আপনি যে নাল লিখেছেন তা সংকলিত হবে না (আপনার কেস)।

সিএসএস আউটপুট হ'ল ঠিক যেমনটি আপনি চেয়েছিলেন তবে আপনাকে এটি লিখতে হবে null:)

  @include box-shadow(12px, 14px, 2px, green, null);

  // compiles to ...

  -webkit-box-shadow: 12px 14px 2px green;  
  -moz-box-shadow: 12px 14px 2px green;  
  box-shadow: 12px 14px 2px green;

Comments

অবশ্যই আমার প্রিয় উপায়টি আপনাকে কখন স্ক্রিপ্টে ফিরে আসতে হয় তার জন্য সবকিছু পড়তে ও বুঝতে সহজ করে তোলে। thnx ড্রপ।

— প্রচুর

Answer 7

নীচের নোট সহ আমি এখানে সমাধানটি ব্যবহার করছি:

@mixin transition($trans...) {
  @if length($trans) < 1 {
    $trans: all .15s ease-out;
  }
  -moz-transition: $trans;
  -ms-transition: $trans;
  -webkit-transition: $trans;
  transition: $trans;
}

.use-this {
  @include transition;
}

.use-this-2 {
  @include transition(all 1s ease-out, color 2s ease-in);
}

• "জিহ্বার" কাছাকাছি থাকতে দেশীয় CSS হিসাবে সম্পত্তি মানগুলি পাস করা পছন্দ করুন
• আর্গুমেন্টের পরিবর্তনশীল সংখ্যা পাস করার অনুমতি দিন
• অলসতার জন্য একটি ডিফল্ট মান নির্ধারণ করুন

Comments

এটি কীভাবে বিদ্যমান উত্তরের উপরে কিছু যুক্ত করে (যথা: stackoverflow.com/a/28072864/1652962 )?

— cimmanon

তিনি ব্যাখ্যা করেছিলেন যে ফাংশনে একাধিক যুক্তি পাস হয়েছে কিনা তা কীভাবে বলা যায় এবং যদি তাই হয় তবে আউটপুট পরিবর্তন করুন। অন্য উত্তরটি দেয় নি।

— তেত্রদেব

কখনও কখনও, আপনি একটি বৈশ্বিক আচরণ সংজ্ঞায়িত করতে চান। উদাহরণস্বরূপ, অ্যানিমেশন ট্রানজিশনগুলি যেখানে আপনি সাধারণত খুব অভিন্ন অভিজ্ঞতা পেতে চান এবং যখন কী করবেন সিদ্ধান্ত নেওয়ার ক্ষেত্রে "ক্রিয়েটিভ বিকাশকারী বিবেচনার" ঝুঁকি নিতে চান না। এটি একটি ডিফল্টকে সংজ্ঞায়িত করে যা ওভাররাইড করা যেতে পারে তবে তর্কগুলি পাস না করার সময় প্রায়শই বেশি কমপ্যাক্ট সিনট্যাক্সের কারণে হয় না। আপনি এক জায়গায় এইভাবে বৈশ্বিক আচরণ পরিবর্তন করতে পারেন।

— duggi

Answer 8

Sass@3.4.9 সহ:

// declare
@mixin button( $bgcolor:blue ){
    background:$bgcolor;
}

এবং মান ছাড়াই ব্যবহার করুন, বোতামটি নীল হবে

//use
.my_button{
    @include button();
}

এবং মান সহ, বোতামটি লাল হবে

//use
.my_button{
    @include button( red );
}

হেক্সা দিয়েও কাজ করে

Comments

এটি বিদ্যমান উত্তরের চেয়ে কীভাবে কিছু যুক্ত করে?

— cimmanon

Answer 9

এমনকি DRYer উপায়!

@mixin box-shadow($args...) {
  @each $pre in -webkit-, -moz-, -ms-, -o- {
    #{$pre + box-shadow}: $args;
  } 
  #{box-shadow}: #{$args};
}

এবং এখন আপনি নিজের বাক্সের ছায়াটিকে আরও স্মার্ট ব্যবহার করতে পারেন:

.myShadow {
  @include box-shadow(2px 2px 5px #555, inset 0 0 0);
}

Comments

কেবল একটি নোট - এটি যেমন পাঠযোগ্য এবং আমি স্বীকার করি যে, এখানেই ডিআরওয়াই কোড এবং পঠনযোগ্যতা / রক্ষণাবেক্ষণের মধ্যে লাইন আঁকতে হবে ।

— লিও নেপোলিয়ন

আমি সম্মত, পাঠযোগ্যতা / রক্ষণাবেক্ষণযোগ্যতা বাড়াতে আমি অন্যান্য মিশ্রণগুলিতে পুনরায় ব্যবহার করার জন্য একটি "ব্রাউজার তালিকা" তৈরি করব। এটি শুভ মিশ্রণগুলির একটি সেট দিয়ে কার্যকর করা যায় এমন অন্যান্য সিএসএস বৈশিষ্ট্যগুলিতে খুব সহজেই একত্রিত হতে পারে। 2014 এর এই নিবন্ধটি এখনও দুর্দান্ত উদাহরণ।

— বেন কলসকি

Answer 10

@mixin box-shadow($left: 0, $top: 0, $blur: 6px, $color: hsla(0,0%,0%,0.25), $inset: false) {
    @if $inset {
        -webkit-box-shadow: inset $left $top $blur $color;
        -moz-box-shadow: inset $left $top $blur $color;
        box-shadow: inset $left $top $blur $color;
    } @else {
        -webkit-box-shadow: $left $top $blur $color;
        -moz-box-shadow: $left $top $blur $color;
        box-shadow: $left $top $blur $color;
    }
}

Comments

এটি ভার্চুয়ালিটির কারণে অন্যান্য উত্তরগুলির চেয়ে তর্কযুক্তভাবে খারাপ। এছাড়াও এটি সদৃশ হিসাবে গণনা করতে অন্য উত্তরগুলির একটির কাছে যথেষ্ট ।

— cimmanon

Answer 11

সুপার সহজ উপায়

কেবলমাত্র noneইনসেটে একটি ডিফল্ট মান যুক্ত করুন - তাই so

@mixin box-shadow($top, $left, $blur, $color, $inset: none) { ....

এখন যখন কোনও ইনসেট পাস হবে না তখন কিছুই প্রদর্শিত হবে না।

Answer 12

আপনি সর্বদা আপনার alচ্ছিক আর্গুমেন্টে নাল নির্ধারণ করতে পারেন। এখানে একটি সহজ ফিক্স

@mixin box-shadow($top, $left, $blur, $color, $inset:null) { //assigning null to inset value makes it optional
    -webkit-box-shadow: $top $left $blur $color $inset;
    -moz-box-shadow: $top $left $blur $color $inset;
    box-shadow: $top $left $blur $color $inset;
}

Answer 13

আমি সিএসএস সংকলকগুলিতে নতুন, আশা করি এটি সাহায্য করে,

        @mixin positionStyle($params...){

            $temp:nth($params,1);
            @if $temp != null{
            position:$temp;
            }

             $temp:nth($params,2);
            @if $temp != null{
            top:$temp;
            }

             $temp:nth($params,3);
            @if $temp != null{
            right:$temp;
            }

             $temp:nth($params,4);
            @if $temp != null{
            bottom:$temp;
            }

            $temp:nth($params,5);
            @if $temp != null{
            left:$temp;
            }

    .someClass{
    @include positionStyle(absolute,30px,5px,null,null);
    }

//output

.someClass{
position:absolute;
 top: 30px;
 right: 5px;
}

Comments

এটি বিদ্যমান উত্তরের চেয়ে কীভাবে কিছু যুক্ত করে?

— cimmanon