Propiedades personalizadas

Clase 8 de 21 • Diseño web con PostCSS, el futuro de CSS

David Camacho

student•

:root { --fontPrincipal: 'Roboto', sans-serif; }
body { font-family: var(--fontPrincipal); }

Alfonso Diaz Rueda

student•

EJEMPLO

:root{

–[NOMBRE DE LA VARIABLE]: [VALOR];
}
SE LLAMA

Color: var(–[NOMBRE DE LA VARIABLE]);
}

Miguel Márquez Serrano

student•

Como se hace para que aparezcan las líneas verticales en Atom, las que marcan las tabulaciones.

Paco Guevara

student•

En Settings > Show Indent Guides

Javier Albadan

student•

En mi caso tuve que ir a: Preferences > Editor > Show Indent Guide

Enrique José Valerio Gómez

student•

Propiedades personalizadas
La idea de este pluging de CSSNext es que tengamos la posibilidad definir variable que podemos usar de forma repetitiva a lo largo de todo el archivo CSS, evitando así tener que tipear lo mismo en cada oportunidad.
Estas variables las vamos a definir con el elemento :root (elemento de orden superior), el cual es recomendable coloquemos al principio de nuestro archivo CSS.
Nota: Lo que definamos aquí (dentro de :root) no aparecerá en el resultado final de nuestro archivo CSS.

Usando este input.css:
:root {
–color: red;
}

div {
color: var(–color);
}

Obtenemos
div {
color: red;
}

También puede compilar propiedades personalizadas CSS con su valor alternativo.
Usando este input.css:
div {
color: var(–color, #f00);
}
Obtenemos
div {
color: #f00;
}

Jordi Santamaría Portolés

student•

a mi en invie.css de la carpeta dist no me cambia el valor del background-color por el de la variable, sino que usa tmb las variables

/* definir variables */
:root{
--bg-body: #fafafa;
--bg-header: #466173;
--bg-footer: #273b47;
}

.InvieHero{
background-color: var(–bg-header);
padding: 20px;
height: 500px;
}

.InvieHero-header {
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-webkit-box-pack: justify;
justify-content: space-between;
}
.InvieFooter {
background-color: var(–bg-footer);
}

Diego Forero

Team Platzi•

Creo que no estas usando doble - al pasar las variables

background-color: var(--bg-header);

Jordi Santamaría Portolés

student•

el problema era que al poner la linia de comentario… la linia de :root no estaba a la primera linia del fitxero y ya dejaba de funcionar todo entonces.

Sergio Zapata Donado

student•

Si no fuera porque es necesario para la carrera de FrontEnd ya habría dejado de ver estos videos. Crear una configuración que funcione en unos computadores y en otros no… como que no tiene gracia.

Diego Forero

Team Platzi•

El problema son las librerías, si hay versiones actualizadas puede que cambien algún parámetro de configuración o la forma de funcionar y rompa todo, no se trata que funcione en unos equipos y otros no, depende de las versiones de las librerías.

Jonathan Araujo

student•

Pues la verdad no se trata de aprobar la carrera, se trata de aprender.

Aunque van a sacar un nuevo curso. 😄

Propiedades personalizadas

El futuro de CSS con PostCSS y CSSNext

Bienvenidos al modulo de PostCSS

¿Qué es PostCSS ?

Nomenclatura BEM ( Bloque, Elemento, Modificador )

Configurando nuestras tareas en Gulp: Servidor, Procesamiento de CSS y Watch

Autoprefixer: Cómo añadir vendor prefixes usando CSS standard

Anidando clases de CSS con Nested

Configurando CSSNext en nuestro archivo Gulp

Propiedades personalizadas

Usando Calc

Media queries personalizadas

Manejo de color

Manejo de filtros

Mixins: Cómo reutilizar estilos de CSS

Separando nuestros archivos CSS y uso de @import

Implementando un carousel con CSS Scroll Snap

Grids responsive con Lost

Minificando archivos con CSSWring

Fuentes responsive con rucksack

Unificando media-queries con Mqpacker

Conclusiones de PostCSS

Desafio 1

Desafio 2