Mixins: Cómo reutilizar estilos de CSS

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

David Camacho

student•

En la descripción del vídeo le falta una ‘s’ a la linea de instalación.

npm install --save-dev postcss-mixins

Franklin Lugo

student•

Hasta este punto del curso encuentro que muchas características y funciones que hemos visto ya las tiene un preprocesador CSS. ¿Por qué deberiamos de dejar preprocesadores y empezar a usar PostCSS?

Gracias

Ricardo Verónica Duran

student•

Muy buena pregunta, lastima que los profesores no contestan.

Franklin Lugo

student•

Ya pasó un mes de esa pregunta. Hoy lo que hago es usar ambos, es decir, sigo usando sass y postcss para hacer de mi css algo mejor, por ejemplo, agregarle prefijos, eliminar bugs de flex, minificarlo

Luis Melo

student•

se perdio un parte del video en la edición? cuando pasa todo el css?

Uriel Ramírez

student•

Hola, No se perdió nada en la edición. Recuerda que este proyecto esta basado en la primer parte del curso, entonces, el ya toma ciertos valores que Leonidas estableció. La idea no era ser redundante de algo que ya se explico, mas bien, enfocarnos a lo particular de PostCSS.

Jonathan Salazar Galeano

student•

Coincido con @aegislp, los elementos que se observan en este video no hacen parte del css generado en la primera parte del curso.

Aitor Chicharro

student•

Hola Carlos! Hay forma de especificar un valor por defecto a un mixin?

Ricardo Azpeitia P.

student•

Parece que no es posible.
Fuente:

Usuario anónimo

user•

Como se para el proceso gulp en windows 10??

MUCHAS GRACIAS.

Balam Omaña

student•

ctrl + c

Usuario anónimo

user•

Muchisimas gracias

Paul Santaria

student•

no puedo instalar correctamente postcss- mixins
npm ERR! Windows_NT 10.0.10240
npm ERR! argv “C:\Program Files\nodejs\node.exe” “C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js” “install” “–save-dev” "postcss-mixins"
npm ERR! node v7.10.0
npm ERR! npm v4.2.0
npm ERR! file C:\Users\paul santaria\Desktop\postcss\package.json
npm ERR! code EJSONPARSE

npm ERR! Failed to parse json
npm ERR! No data, empty input at 1:1
npm ERR!
npm ERR! ^
npm ERR! File: C:\Users\paul santaria\Desktop\postcss\package.json
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR!
npm ERR! This is not a bug in npm.
npm ERR! Tell the package author to fix their package.json file. JSON.parse

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\paul santaria\AppData\Roaming\npm-cache_logs\2017-05-24T22_15_27_160Z-debug.log
alguien me puede aydar??

Diego Andres Cardenas Caro

student•

Me pasa lo mismo… ya lo solucionaste?

Paul Santaria

student•

npm init

Mixins: Cómo reutilizar estilos de CSS

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