CSS var di rgba atau penggunaan warna yang praktis di Sass

Artikel ini didedikasikan untuk ikhtisar pekerjaan Sass saya yang membuat hidup lebih mudah saat bekerja dengan warna selama tata letak. Kami akan melihat 3 pendekatan yang bersama-sama akan membawa kenyamanan untuk bekerja dengan bunga.

Hasilnya, entri seperti itu:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Setara dengan ini:

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

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Namun, pada saat yang sama, Anda hanya menggunakan format warna HEX dalam kontrol. Konversi terjadi secara otomatis. Dilarang menari dengan rebana. Kami melihat:

Pembuatan otomatis variabel 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)};
    }
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , .

Selain itu, dengan menggunakan fungsi ini, memiliki warna input hanya dalam format HEX, Anda dapat dengan mudah mengubah palet warna situs. Dan jangan menggunakan gerakan kode tambahan .

Saya meminta Anda untuk tidak menilai secara ketat - ini adalah artikel pertama tentang Habré.