¿Cómo cargar el valor del ancho de la ventana a la variable SCSS?

La tarea es cargar el valor del ancho de la ventana en una variable SCSS y usarlo. Hagamos una breve introducción a un SCSS.

Las variables SCSS pueden almacenar cualquier tipo de valor de color, familia de fuentes, tamaño de fuente, valores de ruta de recorte, etc., y se utilizan principalmente para mantener la reutilización del código en las hojas de estilo.

Acercarse:

Paso 1: defina una función en SCSS y genere los valores de ancho de ventana precisos para adquirir el ancho de ventana
```
@function get-vw($target) { 
  $vw-context: (1000*.01) * 1px;
  @return ($target/$vw-context) * 1vw;
}
```
Paso 2: Pase un valor en píxeles a esta función y guárdelo en una variable SCSS.
```
$window-width: get-vw(72px);
```
Dado que el ancho de la ventana gráfica es el 1% de la ventana gráfica, podemos escalar el tamaño en px como una proporción.

Paso 3: use la variable donde sea necesario.

principal.scss

$window-width: get-vw(72px); /* Passing in a value in pixels */
  
/* Defining the function to generate the window width* /
@function get-vw($target) { 
  $vw-context: (1000*.01) * 1px;
  @return ($target/$vw-context) * 1vw;
}
  
/* Setting the default values*/
*{
  padding : 0;
  margin : 0;
  box-sizing: border-box;
}
  
/* Using the property*/
.misc{
  padding: 3rem 0;
  color: #fff;
  width: $window-width;
  text-align: center;
  font-size: 1.8rem;
  background-color:green;
}

Salida: Esto daría como resultado el siguiente CSS.

principal.css

/* Passing in a value in pixels */
/* Defining the function to generate the window width*/
/* Setting the default values*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
  
/* Using the property */
.misc {
  padding: 3rem 0;
  color: #fff;
  width: get-vw(72px);
  text-align: center;
  font-size: 1.8rem;
  background-color: green;
}

Nota: aquí, mencionar box-sizing: border-box es realmente importante aquí porque esto haría que el DOM eliminara cualquier margen o espacio predeterminado.

índice.html

<!DOCTYPE html>
    <html>
     <body>
        <div class="misc">
           GeeksforGeeks
        </div>
     </body>
</html>

Salida: aquí, nuestro texto ocupa todo el ancho de su pantalla actual.

Nota: aunque existen métodos de JavaScript como window.outerWidth, no podemos almacenar esos valores en una variable SCSS ya que SCSS es solo un preprocesador.

Publicación traducida automáticamente

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

principal.scss

principal.css

índice.html

Deja una respuesta Cancelar la respuesta