Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS
Webdesign

6 Características de los Preprocesadores que ahora Son Nativas en CSS

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Usar preprocesadores como Sass, LESS y Stylus, siempre ha dado a los desarrolladores más control sobre sus hojas de estilo, pero CSS nativo gadualmente está cerrando la brecha. Las características de CSS tales como variables, calc y mixins son sólo la punta del iceberg; revisemos con lo que actualmente los navegadores nos están ayudando, y cómo la lógica del CSS nativo va a cambiar la manera en que hacemos las cosas.

Brother Typeface
Gráfico de Brother Typeface en Envato Elements

La Era de los Preprocesadores

Las abstracciones del lenguaje como Sass, LESS y Stylus dinamitaron los mundos de los desarrolladores al darles variables, mixins, funciones, extensiones y mucho más. Éstos preprocesadores llenaban las características faltantes que CSS no podía proporcionar. Sin embargo, CSS ya no debería pensarse como "menos lógica" sin la presencia de intelecto. Con CSS avanzando tomando cartas para afinarse a sí mismo ya podemos tener vistazos del futuro; un futuro que competirá con los preprocesadores.

1. Utilizar Mixins

Típicamente asociamos "mixins" con preprocesadores; grupos de declaraciones CSS que puedes reutilizar a lo largo de un proyecto. Un mixin puede ser usado como un asistente independiente, o puedes vasar valores como argumentos para hacerlo extra flexible.

Aquí esta un ejemplo de @mixin de Sass llamado font-size.

El mixin de arriba aceptará los argumentos para $size, $base y es usado en una declaración @include con la capacidad de ajustar argumentos dependiendo del contexto.

El resultado es un valor basado en rem para font-size con una alternativa de px para navegadores que no soportan rem. Los mixins de preprocesador como éste han ahorrado a desarrolladores incontables horas en el transcurso de los años.

Mixins de CSS nativo están actualmente en borradores de editores, pero también tienen una implementación funcionando en Chrome. Si ya has experimentado con variables CSS el siguiente snippet te resultará familiar.

Ten en cuenta que el código de arriba definitivamente hará que se vuelva loco tu resaltador de sintaxis. Ésta manera de escribir un mixin CSS usa una nueva regla llamada @apply similar a lo que conocemos en Sass como @include.

Como estamos familiarizados con Sass usando @include ¡podríamos eventualmente tener @apply para CSS!

Puedes intentar éste experimento por tí mismo dentro de Chrome al habilitar un flag en chrome://flags/#habilitar-funciones-experimentales-de-web-platform.

2. Realizar Cálculos Matemáticos

¿Recuerdas cuando los preprocesadores eran las únicas herramientas de estilo capaces de hacer gimnasia matemática? Bueno ya no es el caso. Con calc() podemos tomar esos incómodos números y mutarlos a nuevos valores basados en tu aritmética deseada.

Ésta es la belleza de calc(); finalmente extiende los poderes de CSS a la estratósfera. ¿Prefieres suma?¿Resta?¿División?¿Multiplicación? Calc puede manejar todo eso y más.

Si quisieras leer más sobre calc() la especificación de W3C tiene todo lo que necesites para hacerte somnoliento y feliz al mismo tiempo. El soporte de navegadores también es muy sólido de acuerdo a Can I Use.

Calc support

3. Pasar la Variable

Las variables nativas para CSS están finalmente aquí. Son una opcion real y tangible para los desarrolldores, aunque tomó algún tiempo aprender de los preprocesadores.

Aquí está como se ve la sintaxis de la variable en Sass:

Las variables en Sass son denotadas con un signo de dolar $, pero en CSS se ven un poco diferente:

Las variables CSS son denotadas con un guión doble -- y son típicamente colocadas dentro de :root para acceso global; aunque su alcance puede ser restringido al colocarlas dentro de declaraciones específicas del selector.

Las variables pueden incluso aceptar un valor alternativo si aún no están definidos, como es el caso con el ejemplo de arriba. El soporte de navegadores tampoco es malo, con Edge mostrando soporte parcial. La especificación también está en la etapa de recomendación candidata para tu lectura placentera.

4. Acumular Anidaciones

Anidar es una característica en muchos preprocesadores que te permite colocar selectores dentro de una declaración existente. Típicamente, anidar en Sass se ve algo como ésto:

Anidar puede llegar a ser complicado y encerrarte en una gran cantidad de problemas, resultando en cadenas de selector imposiblemente largas. Por ésta razón es aconsejable apegarse a la Regla de Inicio y mantener la anidación a no más de tres o cuatro niveles de profundidad.

Mientras que anidar puede ser peligroso, también puede resultar útil si te tomas el tiempo para estar atento. Aquí esta una pequeña muestra de cómo podría verse eventualmente para CSS nativo:

Tal y como estamos acostumbrados con nuestros preprocesadores aliados, la anidación en CSS nativo nos otorga los mismos principios, pero sin la necesidad de compilar el lenguaje. Hay una especificación en borrador por Tab Atkins sobre ésta característica para anidar en CSS nativo.

5. Regla de Extensión

"Extends" son otra manera de pasar propiedades y valores, compartiéndolos entre declaraciones. En Sass nos hemos acostumbrado a aplicar la siguiente sintaxis:

Puedes ver que comenzamos por definir estilos para .message, luego ofrecemos tres variantes con diferentes border-colors. Cada variante primero extiende .message, por lo tanto heredando todas sus reglas de estilo antes de cambiar el color del borde.

La sintaxis idéntica al ejemplo de arriba es lo que está siendo establecido como borrador por Tab Atkins como otra potencial especificación para CSS nativo. Si estás o no de acuerdo con extends (una característica cuyos beneficios son candentemente debatidos) es magnífico ver a autores de CSS adoptar ideas traídas por los preprocesadores.

6. Tus Verdaderos Colores

S alguna vez te encuentras usando funciones de manipulación de colores por parte de un preprocesador, agradecerás ésta funcionalidad en CSS nativo. La función color-mod() toma un color existente y aplica cero o más "ajustadores de color" que especifican cómo manipular el resultado final.

El desarrllo está en las etapas iniciales, y mientras hay polyfills disponibles la sintaxis cambia frecuentemente (el actual color-mod solía ser color por ejemplo).

Tyler Gaw efectuó una herramienta realmente sensacional (colorme.io) que te permite experimentar con todos los posibles ajustadores de color disponibles.

colormeio
colorme.io

La especificación para la función color-mod() está actualmente en modo borrador a través del Grupo de Trabajo CSS.

Pensamientos Finales

De la misma manera que jQuery ayudó a mejorar la Web, así lo hacen los preprocesadores cuando se trata de CSS. Lenguajes como Sass han ayudado a allanar el camino para nuevas ideas y planteamientos aún no considerados por los autores de especificaciones de CSS.

Espero que las nuevas prestaciones de las que hemos hablado te inspiren a usarlas en tu propio trabajo; ¡te animo a considerar usar la funcionalidad nativa en lugar de un preprocesador cuando sea posible!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.