सैस - पृष्ठभूमि अस्पष्टता के लिए हेक्स को आरजीबीए में परिवर्तित करना

Question

मेरे पास निम्नलिखित सास मिक्सिन है, जो आरजीबीए उदाहरण का आधा पूर्ण संशोधन है :

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

मैंने $opacityठीक-ठाक आवेदन किया है , लेकिन अब मैं $colorभाग के साथ फंस गया हूं । जिन रंगों को मैं मिक्सी में भेज रहा हूँ, वे HEX होंगे RGB नहीं।

मेरा उदाहरण उपयोग होगा:

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

— रिक डोनोहे

लेकिन, क्या हेक्स # ($ रंग + $ अपारदर्शिता) के बराबर है? - यह उपयोगी हो सकता है। साध्य?

— किसी

मेरी जानकारी के अनुसार, RGBA अपारदर्शिता जोड़ता है , जिसका अर्थ है कि आप इसके पीछे के तत्व देख सकते हैं। मानक के साथ hex, आप ऐसा नहीं कर सकते।

— रिचर्ड पेक

धन्यवाद। आरजीबी पर हेक्स की कोशिश करने के लिए कभी नहीं सोचा होगा !

— रेवलोजेन

बेहतर उपयोग करने के लिए rgba($color, $alpha)की तरह rgba(#000000, 0.6)परिणाम के रूप में एक ही है और पहिया बदलने की कोई जरूरत नहीं है। ;)

— lbartolic

Answer 2

एक अंतर्निहित मिक्सिन है: transparentize($color, $amount);

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

राशि 0 से 1 के बीच होनी चाहिए;

आधिकारिक सास प्रलेखन (मॉड्यूल: सैस :: स्क्रिप्ट :: कार्य)

Comments

यह मुझे पंसद है! आधुनिक ब्राउज़र कार्यान्वयन के लिए बढ़िया।

— माइक कोरमेन्डी

एक साइड नोट के रूप में: $ राशि कितनी है, यह घटाना होगा, न कि आप जो मूल्य निर्धारित करना चाहते हैं

— MMachinegun

राशि को छोड़कर महान काम किया गया उलटा अर्थ लगता है जिसका आप 90%परिणाम प्राप्त करने के लिए इसे पारदर्शी बनाना चाहते हैं.1

— पैट्रिक मेन्कियास-लुईस

विचित्र। कोई भी जिसने दस्तावेज नहीं पढ़ा था, उसे कभी भी "पारदर्शी" फ़ंक्शन पर संदेह होगा। बहुत उपयोगी हालांकि, धन्यवाद!

— तायबोट

बहुत बढ़िया जवाब। यह स्वीकृत उत्तर होना चाहिए। धन्यवाद। $colorTheme: hsl(289, 65%, 47%); $crossOutColor: transparentize($colorTheme, 0.5);मेरे लिए काम किया।

— रयान

Answer 3

SASS में मूल्यों का मूल्यांकन करने के लिए एक अंतर्निहित आरजीबीए () फ़ंक्शन है।

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

आप इस समाधान की कोशिश कर सकते हैं, सबसे अच्छा है ... url ( github )

// 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

आपका उत्तर अच्छा है लेकिन अनावश्यक रूप से जटिल प्रतीत होता है। मैं अनुमान लगा रहा हूं कि पारदर्शी रंग मेरे प्रश्न के लिए प्रासंगिक नहीं हैं, हालांकि क्या आप बता सकते हैं कि पारदर्शी पृष्ठभूमि वर्ग क्या है? मुझे लगता है कि अगर पारदर्शी-रंगों के मिश्रण का उपयोग नहीं कर रहा हूं तो मुझे इसकी आवश्यकता नहीं है?

— रिक डोनोहे

@RickDonohoe, जहाँ तक मुझे याद है, z-index: 1, और पारदर्शी पृष्ठभूमि IE <9 के लिए एक गिरावट है। मुझे लगता है कि m.Eloutafi ने अन्य आवश्यकताओं में फ़्यूचर के उपयोग के लिए अलग वर्ग में डाल दिया। उत्तर में घड़ी की पंक्ति जहां यह "से:" शुरू होता है ...

— रोमन एम। कोस

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};

  }

}