es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


10 increíbles complementos de PostCSS para hacerte un asistente de CSS

PostCSS se ha convertido recientemente en el nuevo tipo genial en los círculos de desarrollo web, y con razón, ya que ofrece una excelente manera de acelerar el flujo de trabajo de desarrollo de frontend y mejorar la calidad de CSS . Es una herramienta increíblemente versátil que hace posible la transformación de estilos CSS con complementos de JavaScript . Su flexibilidad radica en la forma en que está construido.

La parte principal de PostCSS es un módulo Node.js que puede instalar con npm, y tiene un ecosistema de más de 200 complementos que puede elegir usar en su proyecto.

PostCSS no es un preprocesador ni un postprocesador, ya que los diferentes complementos de PostCSS pueden pertenecer a cualquiera de estas categorías, o a ambas; depende completamente de ti lo que hagas de él. Con PostCSS, no necesita aprender una sintaxis diferente como en el caso de Sass o LESS; puede comenzar a usarlo de inmediato.

PostCSS toma su archivo CSS existente y lo convierte en datos legibles por JavaScript, luego los complementos de JavaScript realizan las modificaciones y PostCSS devuelve la versión modificada del archivo original. Suena genial, ¿verdad?

En esta publicación, echaremos un vistazo a los 10 complementos de PostCSS para darte una idea de algunas de las mejores cosas que puedes lograr con esta increíble herramienta.

# 1. Autoprefixer

Autoprefixer es probablemente el plugin PostCss más conocido, ya que es utilizado por compañías tecnológicas notables como Google, Twitter y Shopify. Agrega prefijos de proveedor a las reglas de CSS donde es necesario .

Autoprefixer usa datos de ¿Puedo usar? De esta forma, no se daña, y siempre puede aplicar las reglas más recientes. Puedes ver cómo funciona en su sitio de demostración interactivo.

# 2. CSSnext

CSSnext es un transpiler de CSS que le permite usar la sintaxis de CSS futura en los sitios actuales . El W3C tiene muchas nuevas reglas de CSS que no están implementadas actualmente por los navegadores, pero podría permitir a los desarrolladores escribir CSS más sofisticados más rápido y más fácil. CSSnext se ha hecho para cerrar esta brecha.

Vale la pena echar un vistazo a sus características para ver qué puede lograr con ellas, por ejemplo, puede usar consultas de medios personalizadas, selectores personalizados, modificadores de color, filtros SVG y nuevas pseudoclases en sus diseños.

# 3. PreCSS

PreCSS es uno de los complementos de PstCSS que funciona como un preprocesador de CSS. Hace posible aprovechar un marcado similar a Sass en sus archivos de la hoja de cálculo .

Al introducir PreCSS en su flujo de trabajo, puede usar variables, instrucciones if-else, for bucles, mixins, @extend y @import rules, nesting y muchas otras funciones útiles en su código CSS. La documentación de Github de PreCSS le brinda instrucciones detalladas sobre cómo aprovecharla al máximo.

# 4. StyleLint

StyleLint es un linter de CSS moderno que corrige y valida tu código CSS. Hace que sea fácil evitar errores y lo empuja a seguir convenciones de codificación consistentes.

StyleLint comprende la última sintaxis de CSS, por lo que se puede utilizar junto con el complemento PreCSS mencionado anteriormente. También le permite hacer su propia configuración, e incluso comprueba si su configuración es válida.

# 7. Font Magician

Si eres fanático de la tipografía sofisticada, seguramente te gustará el plugin Font Magician PostCSS. La magia de Font Magician se basa en su capacidad de generar automáticamente todas las reglas @font-face .

Cómo funciona es bastante sencillo, solo necesita agregar la font-family: "My Fav Font"; Regla CSS a un elemento HTML, y Font Magician hace el resto del trabajo. Puede agregar Google Fonts, la copia local de una fuente, la tipografía Bootstrap, y también puede cargar fuentes de forma asincrónica. Aquí está su sitio de demostración interactivo.

# 8. Escribir SVG

¿Te has preguntado alguna vez cuán genial sería escribir SVG directamente en tus archivos CSS? Con la ayuda del plugin Write SVG PostCSS, puede lograr fácilmente este objetivo.

Este práctico complemento, por ejemplo, permite almacenar tus fondos e íconos SVG en tu archivo CSS y luego agregarlos al elemento HTML relevante de la siguiente manera:

 @svg square {@rect {fill: var (- color, negro); ancho: 100%; altura: 100%; }} .example {background: blanco svg (param cuadrado (- color # 00b1ff)) cover; } 
# 10. Sprites PostCSS

El complemento PostCSS Sprite facilita la generación de sprites de imágenes, es decir, colecciones de imágenes colocadas en un solo archivo. Después de establecer algunas opciones, el complemento toma las imágenes de su archivo de hoja de estilo, las fusiona en un sprite y luego actualiza las referencias de las imágenes donde sea necesario.

Puede usar diferentes filtros y meros para determinar qué imágenes quiere poner en el sprite y también puede establecer las dimensiones de la imagen de salida.

10 aplicaciones de Apple Watch que te encantarán

10 aplicaciones de Apple Watch que te encantarán

Tan pronto como Apple agregó el Apple Watch a su ecosistema y lanzó el WatchKit en noviembre de 2014, los desarrolladores y diseñadores se acercaron para crear aplicaciones de terceros para el reloj inteligente. Como resultado, cerca de 3000 aplicaciones de terceros de Apple Watch ya están disponibles en la App Store. Mu

(Consejos de tecnología y diseño)

20 escritorios y escritorios de escritorio de diseño exclusivo

20 escritorios y escritorios de escritorio de diseño exclusivo

Junto a la cama y nuestro automóvil, nuestra estación de trabajo es probablemente uno de los lugares donde pasamos la mayor parte de nuestro tiempo . ¿Quién no ocasionalmente ha tenido que almorzar mientras trabajan, verdad? Si ese es realmente el caso, tal vez sea hora de que arreglemos nuestras estaciones de trabajo. De

(Consejos de tecnología y diseño)