সাস - ব্যাকগ্রাউন্ড অস্বচ্ছতার জন্য হেক্সকে আরজিবিতে রূপান্তর করা

Question

আমার কাছে নিম্নলিখিত সাস মিক্সিন রয়েছে, এটি একটি আরজিবি উদাহরণের অর্ধ সম্পূর্ণ সম্পূর্ণ পরিবর্তন :

@mixin background-opacity($color, $opacity: .3) {
    background: rgb(200, 54, 54); /* The Fallback */
    background: rgba(200, 54, 54, $opacity);
} 

আমি $opacityঠিক প্রয়োগ করেছি , তবে এখন আমি সেই $colorঅংশটির সাথে আটকে আছি । আমি মিশ্রণগুলিতে যে রঙগুলি প্রেরণ করব সেগুলি আরজিবি নয় HX হবে।

আমার উদাহরণ ব্যবহারটি হবে:

element {
    @include background-opacity(#333, .5);
}

এই মিশ্রণের মধ্যে আমি কীভাবে এইচএক্স মানগুলি ব্যবহার করতে পারি?

Answer 1

Rgba () ফাংশন ভাল দশমিক আরজিবি মান হিসাবে একটি একক হেক্স রঙ গ্রহণ করতে পারে। উদাহরণস্বরূপ, এটি ঠিক কাজ করবে:

@mixin background-opacity($color, $opacity: 0.3) {
    background: $color; /* The Fallback */
    background: rgba($color, $opacity);
}

element {
     @include background-opacity(#333, 0.5);
}

আপনার যদি কখনও হেক্স রঙটি আরজিবি উপাদানগুলিতে বিভক্ত করতে হয় তবে আপনি এটি করতে লাল () , সবুজ () এবং নীল () ফাংশন ব্যবহার করতে পারেন:

$red: red($color);
$green: green($color);
$blue: blue($color);

background: rgb($red, $green, $blue); /* same as using "background: $color" */

Comments

আমি শপথ করছি আমি এটি এবং r, b, g ফাংশন চেষ্টা করেছি এবং এটি কার্যকর হয়নি। আমি একটি ড্রুপাল ব্যাক-এন্ড থেকে গতিশীল রঙগুলি ব্যবহার করছিলাম যদিও এটি কিছু ভেঙেছে। তবুও, শেষের দিকে এটি সাজানো এবং উত্তরটি আরও অনুসন্ধানের পরে আমি পেয়েছি +1

— রিক ডোনোহো

কিন্তু, # ($ রঙ + $ অস্বচ্ছতা) এর হেক্স সমতুল্য কী? - এটি দরকারী হতে পারে। doable?

— সোমেশাদ

আমার জ্ঞানের সেরা হিসাবে, আরজিবিএ অস্বচ্ছতা যুক্ত করেছে , যার অর্থ আপনি এর পিছনে উপাদানগুলি দেখতে পাচ্ছেন। মান সহ hex, আপনি এটি করতে পারবেন না।

— রিচার্ড পেক

ধন্যবাদ। আরজিবি এ হেক্স চেষ্টা করার কথা কখনও ভাবিনি !

— রায়ভিলজোয়েন

ভাল ব্যবহার করার জন্য rgba($color, $alpha)মত rgba(#000000, 0.6)ফলাফলের হিসাবে একই এবং চাকা reinvent কোন প্রয়োজন নেই। ;)

— লবার্টলিক

Answer 2

একটি বিল্টিন মিক্সিন রয়েছে: transparentize($color, $amount);

background-color: transparentize(#F05353, .3);

পরিমাণ 0 থেকে 1 এর মধ্যে হওয়া উচিত;

অফিসিয়াল সাস ডকুমেন্টেশন (মডিউল: সাস :: স্ক্রিপ্ট :: ফাংশন)

Comments

আমি এই পছন্দ! আধুনিক ব্রাউজার বাস্তবায়নের জন্য দুর্দান্ত।

— মাইক Kormendy

পার্শ্ব নোট হিসাবে: $ পরিমাণটি এটি কতটা বিয়োগ করবে, আপনি যে মানটি সেট করতে চান তা নয়

— এম ম্যাচাইনগুন

পরিমাণ ব্যতীত দুর্দান্ত 90%.1

— পরিশ্রমের

উদ্ভট। ডকুমেন্টেশন পড়েনি এমন কেউই কখনও সন্দেহ করতে পারে না যে "ট্রান্সপারেন্টাইজ" ফাংশন রয়েছে। খুব সহায়ক যদিও, আপনাকে ধন্যবাদ!

— টোয়বোট

দুর্দান্ত উত্তর। এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। ধন্যবাদ। $colorTheme: hsl(289, 65%, 47%); $crossOutColor: transparentize($colorTheme, 0.5);আমার জন্য কাজ।

— রায়ান

Answer 3

SASS এর মানগুলি মূল্যায়নের জন্য একটি অন্তর্নির্মিত rgba () ফাংশন রয়েছে ।

rgba($color, $alpha)

যেমন

rgba(#00aaff, 0.5) => rgba(0, 170, 255, 0.5)

আপনার নিজস্ব ভেরিয়েবলগুলি ব্যবহার করে একটি উদাহরণ:

$my-color: #00aaff;
$my-opacity: 0.5;

.my-element {
  color: rgba($my-color, $my-opacity);
}

আউটপুট:

.my-element {
  color: rgba(0, 170, 255, 0.5);
}

Answer 4

আপনি এই সমাধানটি চেষ্টা করতে পারেন, সেরা ... ইউআরএল ( গিথুব )

// Transparent Background
// From: http://stackoverflow.com/questions/6902944/sass-mixin-for-background-transparency-back-to-ie8

// Extend this class to save bytes
.transparent-background {
  background-color: transparent;
  zoom: 1;
}

// The mixin
@mixin transparent($color, $alpha) {
  $rgba: rgba($color, $alpha);
  $ie-hex-str: ie-hex-str($rgba);
  @extend .transparent-background;
  background-color: $rgba;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
}

// Loop through opacities from 90 to 10 on an alpha scale
@mixin transparent-shades($name, $color) {
  @each $alpha in 90, 80, 70, 60, 50, 40, 30, 20, 10 {
    .#{$name}-#{$alpha} {
      @include transparent($color, $alpha / 100);
    }
  }
}

// Generate semi-transparent backgrounds for the colors we want
@include transparent-shades('dark', #000000);
@include transparent-shades('light', #ffffff);

Comments

আপনার উত্তরটি ভাল তবে অকারণে জটিল বলে মনে হচ্ছে। আমি অনুমান করছি স্বচ্ছ ছায়া গো আমার প্রশ্নের সাথে প্রাসঙ্গিক নয়, যদিও আপনি স্বচ্ছ পটভূমির শ্রেণি সম্পর্কে কী ব্যাখ্যা করতে পারেন? আমি ধরে নিচ্ছি যদি আমি স্বচ্ছ-ছায়া গো মিশ্রণটি ব্যবহার না করি তবে আমার এটির দরকার নেই?

— রিক দনোহো

@ রিকডোনোহো, যতদূর আমার মনে আছে, জেড-ইনডেক্স: 1 এবং স্বচ্ছ পটভূমি আইই <9 এর জন্য একটি ফ্যালব্যাক। আমি মনে করি যে মি। এলআউটফি অন্যান্য প্রয়োজনে আরও বেশি ব্যবহারের জন্য এটি পৃথক শ্রেণিতে স্থাপন করেছিলেন। "থেকে:" দিয়ে শুরু হয় যেখানে উত্তরে সারি দেখুন ...

— রোমান এম কোস

Answer 5

যদি আপনার পরিবর্তনশীল এবং আলফা স্বচ্ছতা থেকে রঙ মিশ্রিত করা প্রয়োজন হয় এবং সমাধানগুলির সাথে rgba()ফাংশন অন্তর্ভুক্ত থাকে তবে আপনি পছন্দ মতো একটি ত্রুটি পান

      background-color: rgba(#{$color}, 0.3);
                       ^
      $color: #002366 is not a color.
   ╷
   │       background-color: rgba(#{$color}, 0.3);
   │                         ^^^^^^^^^^^^^^^^^^^^

এর মতো কিছু কার্যকর হতে পারে।

$meeting-room-colors: (
  Neumann: '#002366',
  Turing: '#FF0000',
  Lovelace: '#00BFFF',
  Shared: '#00FF00',
  Chilling: '#FF1493',
);
$color-alpha: EE;

@each $name, $color in $meeting-room-colors {

  .#{$name} {

     background-color: #{$color}#{$color-alpha};

  }

}