CSS var dans rgba ou utilisation pratique des couleurs dans Sass

Cet article est dédié à un aperçu de mon travail Sass qui me facilite la vie lorsque l'on travaille avec des couleurs dans la mise en page. Nous examinerons 3 approches qui, ensemble, apporteront du confort au travail avec des fleurs.

En conséquence, une telle entrée:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Équivalent à ceci:

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

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Mais, en même temps, vous utilisez uniquement le format de couleur HEX dans le contrôle. La conversion a lieu automatiquement. Pas de danse avec un tambourin. Nous regardons:

Création automatique de variables 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)};
    }
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , .

De plus, en utilisant ces fonctions, ayant comme couleur d'entrée uniquement au format HEX, vous pouvez facilement changer la palette de couleurs du site. Et ne recourez pas à des mouvements de code supplémentaires .

Je vous demande de ne pas juger strictement - c'est le premier article sur Habré.