CSS var en rgba o uso práctico de colores en Sass

Este artículo está dedicado a una descripción general de mi trabajo Sass que me facilita la vida al trabajar con colores durante el diseño. Veremos 3 enfoques que juntos brindan comodidad al trabajar con flores.

Como resultado, dicha entrada:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Equivalente a esto:

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

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Pero, al mismo tiempo, usa solo el formato de color HEX en el control. La conversión se realiza automáticamente. No bailar con pandereta. Miramos:

Creación automática 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)};
    }
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , .

Además, con la ayuda de estas funciones, teniendo como color de entrada solo en formato HEX, puede cambiar fácilmente la paleta de colores del sitio. Y no recurra a movimientos de código adicionales .

Les pido que no juzguen estrictamente, este es el primer artículo sobre Habré.