Imports, Variables y Fuentes de Google en Sass

Clase 21 de 29 • Curso Práctico de React JS 2019

Resumen

Así como JavaScript, Sass nos permite almacenar valores en variables que podemos usar en cualquier otra parte de nuestras hojas de estilo.

$theme-font: 'Muli, sans-serif;
$main-color: #8f57fd;

body {
  background: $main-color;
  font-family: $theme-font;
}

Podemos guardar nuestras variables en un archivo especial e importarlo desde los archivos de estilo donde queremos usar estas variables.

# Vars.scss
$theme-font: 'Muli, sans-serif;
$main-color: #8f57fd;

# App.scss
@import ""./Vars.scss""

`body {
  background: $main-color;
  font-family: $theme-font;
}

También podemos importar hojas de estilo externas a nuestra aplicación. Por ejemplo: las fuentes de Google.

@import url(https://fonts.googleapis.com/css?family=Muli&display-swap)

Recuerda que puedes tomar el Curso de Sass para estudiar esta herramienta a profundidad.

Daniel Pereira Perez

student•

En Visual Studio Code pueden descargar SCSS IntelliSense para el auto completado de las variables. Extension:

Quedando una ayuda de este estilo

Oscar Barajas Tavares

Team Platzi•

Genial este aporte, lo voy a instalar y revisar a detalle.

Beatriz Pérez Santana

student•

Gracias!! 👌🏻😄

Fernando Briceño

student•

Sinceramente este curso y el profesor MOTIVAN a no parar de seguir el curso, en otros anteriores me he sentido cansado en algunas clases de seguir lo que está haciendo el profesor, pero este la verdad son vídeos tras vídeos y me estoy divirtiendo mientras aprendo!

Karina Magaly Marroquín García

student•

Opino lo mismo, es que la manera y alegria con la que explica el profesor motivan

Daniel Esteban Santos Mendez

student•

Yo recomiendo mucho que si estamos usando cualquier preprocesador no usemos las variables del mismo, sino las nativas de css que hacemos así:

:root {
	--native-variable: value;
}

El unico requisito de sintaxis es que debe comenzar con doble guion -- y al ser llamada de ser así var(--native-varibale);, también debes definirlas e inicializarlas siempre en el :root {}

Es mejor usar las herramientas nativas de css y apoyarnos en los preprocesadores, como ya tenemos variables nativas usemoslas, así apoyamos el desarrollo del lenguaje.
Las variables de los preprocesadores al compilar desaparecen y cada variable donde fue llamada se convertira en el valor de la misma.
Cómo las variable de preprocesadores desaparecen al momento de ser compiladas no podremos acceder a ellas con JS, cosa que con las variables nativas si podemos, es más desde el inspector de elementos podemos verlas y jugar con ellas.

Esteban Casallas

student•

Q buen aporte, gracias !

Jimmy Buriticá Londoño

student•

Gracias por el consejo, lo tendré muy en cuenta en mis desarrollos.

Miguel Prada

student•

No estoy seguro si esto se hizo en algun video pasado, pero creo que hizo falta agregarle los meta tags al head en public/index.html

<head>
    <title>Platzi Video</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

David Lechugazteca Ma'tlaktli Sipakt

student•

SOLUCON :::::: en la uri de vars va con comillas simples

ERROR in ./src/assets/styles/App.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/styles/App.scss) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: URI is missing ')' on line 1 of src/assets/styles/vars.scss from line 1 of /Users/davidlechugahuerta/Desktop/PlatziVideo/src/assets/styles/App.scss >> @import url( https://fonts.googleapis.com/css?family=Muli&display=swap> );

Noe Adrián Acuña Prado

student•

// Google Fonts
@import url(https://fonts.googleapis.com/css?family=Muli&display=swap);

// Font Variables
$theme-font: 'Muli', sans-serif;

// Color Variables
$main-color: #8f57fd;```

Wilson Fabian Pérez Sucuzhañay

student•

Pregunta pero si quiero usar una variable en el carousel.sccs siempre debo importar en dicho archivo el var.scss o se puede hacer global para que reconozca las variables y que no de el error al poner $color-white por poner un ejemplo?

Cesar Augusto Barco de Gouveia

student•

Para poder usar una variable global tendrías que usar un solo archivo que te funcione como entry y allí importar las variables y otros scss que quieras usar.

En el caso del curso tienes que importar las variables a Carousel.scss para que las puedas usar.

Javier Alejandro Camacho

student•

Muy bueno el curso, la forma en la que el profe da la clase me mentiene atento y despierto.

Gracias por tanto empeño Oscar!.

Esteban Casallas

student•

totalmente !

Samuel Lopez

student•

Quisiera saber por que eslint me marca esos errores si el codigo esta exactamente igual que el de la clase

Daniel Adolfo Ordoñez Rubio

student•

Hola, Samuel :) Puedes poner tu cursor encima de donde te marca error para ver que dice, la descripción del error puede ser muy útil para saber que pasa, es posible que tengas algunas reglas en eslint que no quieres y saber cuáles son te puede servir para deshabilitarlas.

Jackeline Jaimes Ortiz

student•

Algún buen compañero me podría facilitar su código de webpack,config y el de index.js por favor! tengo un error porque no se crea el archivo bundle.js (Webpack).

Juan Castro

teacher•

Este te puede servir: https://github.com/platzi/escuela-js/blob/feature%2Freact/webpack.config.js.

Fer Torres

student•

Hola ¿Podemos ver tu código en GitHub para revisarlo?

Eduardo Ferrer Olvera

student•

no entiendo que sucede en la linea 3 del archivo Vars.css.

Entiendo de dónde sale Muli, pero sans-serif??

alguien me puede ayudar?

César Palma

student•

sans-serif es una fuente que ya viene en el navegador, Muli es la fuente que importamos de google fonts

César Palma

student•

la fuente que esta mas a la izquierda en este caso Mulí se mostará, pero en caso no haya conexion con google fonts (desconectarse de internet para probarlo) cargaran las fuentes que esten a la derecha en ese orden de prioridad, en este caso sans-serif recide en el navegador y con esa fuente se mostrará el contenido.

Fabricio Dupraz

student•

Código de la sección de "Search":

@import ‘…/Vars.scss’;

.main {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 300px;
	border-radius: 0px 0px 40px 40px;
}
.main__title {
	color: white;
	font-size: 25px;
}
.input {
	background-color: rgba(255, 255, 255, 0.1);
	border: 2px solid white;
	border-radius: 25px;
	color: white;
	font-family: $theme-font;
	font-size: 16px;
	height: 50px;
	margin-bottom: 20px;
	outline: none;
	padding: 0px 20px;
	width: 70%;
}
::placeholder {
	color: white;
}

Daniela Salermi

student•

Si les pasa que no les funcionan los Media, es porque falta colocar los meta dentro de la etiqueta <head>

Saludos

<!DOCTYPE html>
<html>

<head>
    <title>Platzi Video</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

<body>
    <div id="app"></div>
</body>

</html>

Jeith S Carrillo A

student•

Recomiendo usar las variables de css y así no depender del preprocesador. con esto se hace nativo el proceso de variables y dará un poco de rapidez al sitio. el ejemplo con variables de css quedaría así:

Vars.scss

@import url(https://fonts.googleapis.com/css?family=Muli&display=swap);

:root {
  --theme-font:  'Multi', sans-serif;
  --main-color: #8f57fd;
}

y en App.scss:

@import “./Vars.scss”;
@import “./Media.scss”;

body {
margin: 0;
font-family: var(–theme-font);
background: var(–main-color);
}```

Esteban Casallas

student•

url usada: https://fonts.googleapis.com/css?family=Muli&display-swap

Deyvi Jhonny Bustamante Perez

student•

La duración del Video, el ejemplo, que super, te mantiene siempre atento

Super clase

Juan Castro

teacher•

:star2: ¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias? | Curso de Frontend Developer

Javier Romero

student•

no entiendo cual es el hash, en que parte del inspector de elementos lo muestra ?

Luis Lira

student•

Un hash simplemente es una cadena para que un elemento tenga un nombre único. Lo muestra en el min 5:17, cuando abre el inspector de elementos y en el src de la imagen dice "assets/7104263...png", los tres puntos es porque el nombre es muy largo, ese es el hash.

Javier Romero

student•

entendido muchas gracias Luis_LiraC

María de los Milagros Vilchez

student•

No me funcionan las fuentes, alguien sabe cómo lo puedo resolver? Mi repositorio: https://github.com/milagrosvilchez02/React

Héctor Eduardo López Carballo

student•

Hola!

Te hace falta ponerle comillas.

Héctor Eduardo López Carballo

student•

Puedes intentarlo y decirnos si funciona?

Alejandro González Reyes

student•

En mi regla de estilo del input hago referencia a una imagen, pero webpack al parecer no la procesa

.input {
    height: 48px;
    border-radius: 35px;
    padding: 0 30px;
    width: 70%;
    background-color: rgba(255, 255, 255, .1);
    border: 2px solid white;
    outline: none;
    color: white;
    background-image: url("../../static/magnifier.png");
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: calc(100% - 30px) center;
}

Las demás imágenes que parecen en el HTML si

Oscar Barajas Tavares

Team Platzi•

Podrías mostrarme tu webpack o subir el proyecto a github para revisarlo a detalle.

Alejandro González Reyes

student•

Gracias por responder Solucioné el problema agregando publicPath: '/',

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.html$/,
        use: {
          loader: 'html-loader',
        },
      },
      {
        test: /\.(s*)css$/,
        // 1. Se procesa el contenido sass, 2 Se procesa el CSS resultante del paso anterior, 3. Se extraé el CSS del bundje.js a un archivo .css  (se declaran las tareas del final al principio)
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
          'sass-loader',
        ],
      },
      {
        // Regla para elementos multimedia
        test: /\.(png|gif|jpg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              // El nombre de los archivos será un hash único conservando su extensión y se guardará en assets (dentro del dist)
              name: 'assets/[hash].[ext]',
              // Establecer la ruta publica a partir de la cual se comenzará a leer el archivo
              // [localhost]/assets/hashgenerado.ext
              publicPath: '/',
            },
          },
        ],
      },
      /*{
        test: /\.(png|gif|jpg)$/,
        loader: 'url-loader',
      },*/
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './public/index.html',
      filename: './index.html',
    }),
    // Extrae el css del bundle a un nuevo archivo de css
    new MiniCssExtractPlugin({
      // como voy a llamar el archivo resultante
      filename: 'assets/[name].css',
    }),
  ],
};

Alejandro González Reyes

student•

Ahora fontAwesome ofrece un archivo JS como kit de iconos. Tomando buenas prácticas, ¿es recomendable agregarlo de forma directa al index.js? o gestionarlo mediante webpack.

Si tuviese que gestionarse, como se haría?

Oscar Barajas Tavares

Team Platzi•

Lo ideal seria gestionarlo desde webpack, también hay un paquete que lo instala como una dependencia.

Imports, Variables y Fuentes de Google en Sass

¿Qué es React JS?

Aprende qué es React.js

DOM, Virtual DOM y React DOM

Crear una Aplicación con React JS

Create React App y Tipos de Componentes

JSX: JavaScript + HTML

Props: Comunicación entre Componentes

¿Qué son los métodos del ciclo vida?

State - Events

Instalación y configuración de entorno

Agregando compatibilidad con todos los navegadores usando Babel

Configurar un entorno de trabajo profesional

Webpack: Empaquetando nuestros módulos

Webpack Dev Server: Reporte de errores y Cambios en tiempo real

Estilos con SASS

Configuración final: ESLint y Git Ignore

Arquitectura de componentes para Platzi Video

Llevar un diseño de HTML y CSS a React

Estructura del Header

Estilos del Header

Estructura y Estilos del Buscador

Estructura y Estilos de Carousel y Carousel Item

Estructura y Estilos del Footer

Añadiendo imágenes con Webpack

Imports, Variables y Fuentes de Google en Sass

Uso de una API de desarrollo (Fake API)

Creando una Fake API

React Hooks: useEffect y useState

Lectura React Hooks

Conectando la información de la API

Custom Hooks

PropTypes

Usar React Tools

Debuggeando React con React DevTools

Prepárate para lo que sigue