CSS var in rgba أو الاستخدام العملي للألوان في Sass

هذه المقالة مخصصة لإلقاء نظرة عامة على عملي في Sass الذي يجعل الحياة أسهل عند العمل باستخدام الألوان في التخطيط. سننظر في 3 مناهج ستوفر معًا الراحة للعمل مع الزهور.

نتيجة لذلك ، مثل هذا الإدخال:

body{
  color: color(primary);
  background: color(primary, 0.5);
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

ما يعادل هذا:

:root {
  --color-pink: #E20071;
  --color-pink--rgb: 226, 0, 113;
}

body {
  color: var(--color-pink);
  background: rgba(var(--color-pink--rgb), 0.5);
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

لكن في نفس الوقت ، لا تستخدم سوى تنسيق لون HEX في عنصر التحكم. يتم التحويل تلقائيًا. ممنوع الرقص مع الدف. نحن ننظر:

الإنشاء التلقائي لمتغيرات CSS

CSS, Sass , .

, .

$colors : (
  "pink"  : #E20071,
  "blue"  : #00A3DA,
  "gray"  : #939394,
  "white" : #FFFFFF,
  "black" : #1B1B1B,
);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, CSS ,  $colors   :root.

:root{
  @each $key, $value in $colors {
    --color-#{$key} : #{$value};
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

,   :

:root {
  --color-pink: #E20071;
  --color-blue: #00A3DA;
  --color-gray: #939394;
  --color-white: #FFFFFF;
  --color-black: #1B1B1B;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Sass RGB , HEX. , :

@function HexToRGB($hex) {
  @return red($hex), green($hex), blue($hex);
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, 

:root {
  --color-pink-rgb: #{HexToRGB(#E20071)};
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

rgba, — , — . 0 ( ) 1 ( ):

body{
  background: rgba(var(--color-pink-rgb), 0.5);
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

CSS

CSS ,  color.

@function color($name) {
  @return var(--color-#{unquote($name)});
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

body{
  background: color(pink);
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

body{
  background: var(--color-pink);
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, 3 , (CSS ) , :

body{
  color: color(primary);
  background: color(primary, 0.5);
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

$colors_theme : (
  "primary"   : "pink",
  "secondary" : "blue"
);

$colors : (
  "pink"  : #E20071,
  "blue"  : #00A3DA,
  "gray"  : #939394,
  "white" : #FFFFFF,
  "black" : #1B1B1B,
);

@function HexToRGB($hex) {
  @return red($hex), green($hex), blue($hex);
}

@function color($name, $opacity: false) {
  @if $opacity {
    @return rgba(var(--color-#{unquote($name)}--rgb), $opacity);
  } @else {
    @return var(--color-#{unquote($name)});
  }
}

:root{
  @if $colors {
    @if $colors_theme {
      @each $key, $value in $colors_theme {
        --color-#{$key} : var(--color-#{$value});
        --color-#{$key}--rgb : var(--color-#{$value}--rgb);
      }
    }

    @each $key, $value in $colors {
      --color-#{$key} : #{$value};
      --color-#{$key}--rgb : #{HexToRGB($value)};
    }
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , .

علاوة على ذلك ، بمساعدة هذه الوظائف ، نظرًا لوجود لون إدخال فقط بتنسيق HEX ، يمكنك بسهولة تغيير لوحة ألوان الموقع. ولا تلجأ إلى حركات الكود الإضافية .

أطلب منكم عدم الحكم بدقة - فهذه هي المقالة الأولى عن حبري.