Share
Bienvenido a "PostCSS Deep Dive: QuickStart Guide". A lo largo de estas primeras publicaciones de nuestra serie, veremos cómo comenzar con PostCSS de la manera más rápida y eficiente posible..
En este tutorial, comenzaremos con las opciones de configuración instantánea, por lo que podrá trabajar con PostCSS en unos minutos a partir de ahora. Actualmente tenemos dos opciones de configuración instantánea: CodePen y Prepros..
Veamos cómo puedes usarlos para comenzar a jugar con PostCSS de inmediato..
Si eres nuevo en PostCSS, la forma más rápida de comenzar a usarlo es a través de CodePen.
CodePen ahora tiene soporte preintegrado para PostCSS, junto con los siguientes complementos y paquetes:
Esta selección de complementos le brinda soporte para futuras sintaxis, funcionalidad tipo Sass, eliminación de comentarios y la capacidad de escribir código de transformación en forma abreviada.
Comience por ir a CodePen y crear una nueva pluma. Luego haga clic en el pequeño icono de engranaje en la parte superior izquierda de la ventana de CSS para abrir el panel de configuración.
Desde el desplegable etiquetado. Preprocesador CSS Selecciona el PostCSS opción. También puede consultar el botón de radio etiquetado Autoprefixer tener ese plugin incluido.
Después de hacer esta selección, debería ver un pequeño botón negro debajo del menú desplegable etiquetado Necesita un complemento?. Haga clic en ese botón y se abrirá un panel que muestra una lista de @ reglas. Copia y pega cualquiera de estos @ reglas en su panel CSS para comenzar a usar el complemento PostCSS correspondiente.
Veamos un ejemplo de cómo podríamos usar los complementos disponibles de PostCSS con CodePen, comenzando con el csssiguiente paquete.
En la parte superior del panel CSS, agregue este código para especificar que desea usar cssnext:
@use cssnext;
Con esta línea en su lugar, ahora podrá usar toda la funcionalidad descrita en http://cssnext.io/features. Vamos a utilizar la variable CSS y las funciones de color para establecer un color en el fondo del cuerpo..
Primero, configuramos un :raíz Sección y definir una variable CSS en ella. Agrega esto a tu panel de CSS:
: root --body_bg_color: negro;
Ahora podemos usar esa variable en nuestro CSS agregando este código a continuación:
body background: var (- body_bg_color);
En este punto, debería haber visto que el fondo de su pluma se ha vuelto negro. También puede hacer clic en el Ver compilado Botón en la parte superior de su panel CSS para ver el código que se ha generado:
"Ver compilado" que muestra el código después del procesamiento con PostCSSAhora, digamos que encontramos un poco de negro duro para el diseño en el que estamos trabajando y queremos aclararlo un poco. Para ajustar el color podemos utilizar el sintaxis futura que permite modificar el color.
En la línea que declara el --body_bg_color variable, cambiar el valor de negro a:
--body_bg_color: color (ligereza negra (20%));
Esta función de color aclara el color negro en un 20%. Ahora debería ver que el fondo de su pluma ha cambiado a un gris oscuro.
Cualquiera de los complementos compatibles se puede usar en CodePen de la misma manera:
Accentsconagua
@ regla para el plugin que quieres usarAquí está la demo (visualmente poco destacable) que acabamos de construir:
Es posible que Prepros no tenga el rango de soporte de plugin que CodePen tiene, pero incluye la activación sin problemas de ambos Autoprefixer y csssiguiente. Prepros se puede descargar desde https://prepros.io.
Para comenzar, arrastre y suelte un proyecto que incluya un archivo CSS en la interfaz. Luego haga clic en el nombre del archivo CSS para abrir un panel de configuraciones en el lado derecho. Desde aquí, puede marcar las casillas etiquetadas. AutoPrefix CSS para habilitar Autoprefixer, y Habilitar csssiguiente para usar csssiguiente:
Ahora podrá utilizar toda la funcionalidad del paquete de complementos cssnext, además de tener su CSS reparado automáticamente..
Bien, resumamos rápidamente lo que hemos cubierto arriba:
@ reglas para habilitar complementos específicosCodePen y Prepros son dos formas excelentes de comenzar a utilizar PostCSS casi al instante. Sin embargo, el inconveniente es que no puedes decidir qué complementos usar.
Cuando esté listo para aprovechar todo el poder de PostCSS, querrá elegir y configurar su propia selección de complementos. Probablemente la forma más accesible de hacerlo es a través de la configuración de proyectos PostCSS personalizados a través de ejecutores de tareas como Gulp o Grunt..
Aprenderás cómo hacerlo en los siguientes dos tutoriales, “Guía de inicio rápido: configuración rápida” y “Guía de inicio rápido: configuración rápida”.
