Diferencia entre las propiedades personalizadas de CSS y las variables del preprocesador

En este artículo, aprenderemos la diferencia entre las propiedades personalizadas de CSS y las variables de preprocesador.

Propiedades personalizadas de CSS : las propiedades personalizadas de CSS también se denominan variables de CSS o variables en cascada. Estas entidades contienen valores específicos que se reutilizarán en todo el documento y se puede acceder a ellos mediante la función var() (p. ej., color:(–primary-color);). El nombre de propiedad que tiene un prefijo como –, representa las propiedades personalizadas y su valor se usará en otras declaraciones usando la función var().

Es realmente difícil manejar las propiedades de estilo de gran tamaño. Para manejar esto, las propiedades personalizadas nos permiten declarar una variable en un lugar y se puede hacer referencia a ella en muchos otros lugares. Esto reducirá el esfuerzo de administrar el código porque podemos actualizar valores fácilmente al hacer cambios en un solo lugar.

Sintaxis:

Para variables:

var( --custom-name, value )

Para propiedades personalizadas:

--custom-name: values;

Ejemplo 1: en el siguiente código de ejemplo, veremos cómo funcionan las propiedades CSS personalizadas.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
        /* Declare CSS custom properties
            or CSS variables */
          
        :root {
            --background-color: #dee1e3;
            --primary-font-color: blue;
            --heading-color: green;
        }
          
        body {
            background-color: var(--background-color);
        }
          
        h1 {
            color: var(--heading-color);
        }
          
        p {
            color: var(--primary-font-color);
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h3>CSS Custom Variable</h3>
        <p>A Computer Science portal for geeks</p>
    </center>
</body>
</html>

Producción:

Variables del preprocesador: el programa procesa la hoja de estilo en la sintaxis avanzada y la compila en hojas de estilo CSS normales, que se pueden usar en el sitio web. Es una extensión de CSS que permite usar funciones como variables, anidamiento, importaciones, mezclas, herencia, etc., todo en una sintaxis compatible con CSS, es decir, es compatible con todas las versiones de CSS.

Sintaxis:

$variable-name:variable-property;

Ejemplo 2: en el siguiente ejemplo de código, veremos cómo podemos usar variables de preprocesador usando variables SCSS.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
    "width=device-width, initial-scale=1">
    <title>GeeksforGeeks</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <style>
        .title {
            color: green;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 class="title">
            GeeksforGeeks
        </h1>
        <h3>
            CSS Preprocessor Variable
        </h3>
        <p>A computer science portal for geeks.</p>
    </center>
</body>
</html>

Código SCSS:

$button-color:green;
.title{
    color:$button-color;
}

Código CSS compilado:

.title {
    color: green; 
}

Producción:

Diferencia entre las propiedades personalizadas de CSS y la variable del preprocesador de CSS:

Propiedades personalizadas	Variables del preprocesador
Las propiedades personalizadas son las entidades que contienen los valores específicos que se reutilizarán en todo el documento y se puede acceder a ellas mediante la función var() . En otras palabras, estas son las propiedades personalizadas simples de CSS.	El preprocesador es un tipo de programa que tiene la capacidad de generar propiedades de estilo a partir de su propia sintaxis única. En otras palabras, se trata de la modificación de la propiedad personalizada.
sintaxis: –nombre-variable;	sintaxis: $nombre-variable;
Las propiedades personalizadas pueden ser en cascada, es decir, las variables pueden establecerse dentro de cualquier selector o pueden anular el valor actual que se le asigna. Además, se puede acceder y modificar mediante Javascript.	Las variables del preprocesador permiten la reutilización de los fragmentos de código. Para esto, las tareas que se solicitan varias veces se pueden automatizar fácilmente. Por lo tanto, las posibilidades de obtener el error se redujeron.
No hay necesidad de usar el compilador.	Debes necesitar un compilador.
No es necesario convertirlo en código CSS antes de usarlo.	Primero, necesita convertirlo a código CSS antes de usarlo.
Estos son fáciles de usar.	Primero debe compilarlo antes de usarlo.

Publicación traducida automáticamente

Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Propiedades personalizadas

Variables del preprocesador

Deja una respuesta Cancelar la respuesta