Share
El uso de preprocesadores como Sass, LESS y Stylus siempre le ha dado a los desarrolladores más control sobre sus hojas de estilo, pero CSS nativo está cerrando gradualmente la brecha. Las características de CSS como variables, calc y mixins son solo la punta del iceberg; Revisemos en qué nos ayudan actualmente los preprocesadores y cómo la lógica nativa de CSS cambiará la forma en que hacemos las cosas.
Gráfico de Brother Typeface en Envato ElementsLas abstracciones de lenguaje como Sass, LESS y Stylus hicieron explotar los mundos de los desarrolladores dándoles variables, combinaciones, funciones, extensiones y mucho más. Estos preprocesadores completaron las características faltantes que CSS no pudo proporcionar.
Sin embargo, CSS ya no debe considerarse como "sin lógica" sin la presencia del intelecto. Con CSS en movimiento para perfeccionarse, ya estamos vislumbrando el futuro, un futuro que competirá con los preprocesadores..
Por lo general, asociamos "mixins" con preprocesadores, grupos de declaraciones CSS que puede reutilizar a lo largo de un proyecto. Un mixin puede usarse como un ayudante independiente, o puede pasar valores como argumentos para hacerlo más flexible..
Aquí hay un Sass @mixin ejemplo llamado tamaño de fuente.
@mixin font-size ($ size, $ base) font-size: $ size; // alternativa para los navegadores antiguos tamaño fuente: ($ size / $ base) * 1rem;
El mixin anterior aceptará argumentos para $ talla y $ base, y se usa en una @incluir Declaración con la capacidad de ajustar argumentos dependiendo del contexto..
/ * Sass Call * / body @include font-size (14, 16); / * Salida CSS * / body font-size: 14px; tamaño de letra: 0.875rem;
El resultado es un movimiento rápido del ojo valor basado para tamaño de fuente con un px respaldo para los navegadores que no son compatibles movimiento rápido del ojo. Los mixins de preprocesador como este han ahorrado a los desarrolladores innumerables horas a lo largo de los años.
Los mixins nativos de CSS son actualmente un borrador de los editores, pero también tienen una implementación funcional en Chrome. Si ya has jugado con variables CSS, el siguiente fragmento de código te resultará bastante familiar..
: root --pink-theme: background: # F64778;
Tenga en cuenta que el código anterior definitivamente hará que su resaltador de sintaxis se vuelva loco. Esta forma de escribir un mixin de CSS usa una nueva regla llamada @aplicar, similar a lo que sabemos en Sass como @incluir.
cuerpo @apply --pink-theme;
Así como estamos familiarizados con el uso de Sass @incluir, eventualmente podríamos tener @aplicar para CSS!
Puedes probar este experimento por ti mismo en Chrome habilitando una marca debajo de chrome: // flags / # enable-experimental-web-platform-features.
¿Recuerdas cuando los preprocesadores eran las únicas herramientas de estilo capaces de gimnasia matemática? Bueno, ese ya no es el caso. Con calc (), Podemos tomar esos números molestos y mutarlos en nuevos valores según la aritmética que desee..
nav margen: calc (1rem - 2px) calc (1rem - 1px);
Esta es la belleza de calc (); finalmente extiende los poderes CSS a la estratosfera. ¿Prefieres la adición? ¿Sustracción? ¿División? ¿Multiplicación? Calc puede manejar todo eso y más.
Si desea leer más sobre calc (), La especificación W3C tiene todo lo que necesita para sentirse adormecido y feliz al mismo tiempo. El soporte del navegador también es sólido, según Can I Use.
Las variables nativas para CSS están finalmente aquí. Son una opción real y tangible para los desarrolladores, aunque tomó algo de tiempo aprender de los preprocesadores..
Aquí es cómo se ve la sintaxis de la variable Sass:
$ unidad de espaciado: 20px; main margin: $ spacing-unit; relleno: $ unidad de espaciamiento;
Las variables Sass se denotan con un dólar. PS Signo, pero en CSS se ven un poco diferentes:
: root --primary-color: skyblue; nav.primary fondo: var (- color primario);
Las variables CSS se denotan con un doble guión. -- y se colocan normalmente dentro :raíz para el acceso global, aunque su alcance se puede restringir colocándolos dentro de declaraciones de selector específicas.
div color: var (- my-var, rojo);
Las variables pueden incluso aceptar un valor de reserva si aún no están definidos, como es el caso del ejemplo anterior. El soporte del navegador tampoco es malo, ya que Edge muestra un soporte parcial. La especificación también se encuentra en la etapa de recomendación de candidatos para su placer de lectura..
El agrupamiento es una función en muchos preprocesadores que le permite colocar selectores dentro Una declaración existente. Típicamente, anidar en Sass se ve algo como esto:
ul margen: 20px auto; li font-size: 12px; a texto-decoración: ninguno;
La anidación puede volverse difícil de manejar y envolverte en un montón de problemas, lo que resulta en cadenas de selector increíblemente largas. Por esta razón, es recomendable atenerse a la Regla de Inicio y seguir anidando a no más de tres o cuatro niveles de profundidad..
Si bien la anidación puede ser peligrosa, también puede ser útil si se toma el tiempo para estar atento. Aquí hay un adelanto de cómo podría eventualmente buscar CSS nativo:
/ * CSS Nesting * / nav color: # 222; & .primary fondo: granate; / * Resultado * / nav color: # 222; nav.primary fondo: granate;
Al igual que estamos acostumbrados con nuestros aliados preprocesadores, el anidamiento nativo de CSS nos presta los mismos principios, pero sin la necesidad de compilar el lenguaje. Hay un borrador de especificaciones de Tab Atkins en esta misma característica para el anidamiento de CSS nativo.
Las "extensiones" son otra forma de pasar propiedades y valores, compartiéndolos entre las declaraciones. En Sass, nos hemos acostumbrado a aplicar la siguiente sintaxis:
.mensaje borde: 1px sólido #ccc; relleno: 10px; color: # 333; .success @extend .message; color del borde: verde; .error @extender .message; color del borde: rojo; .warning @extend .message; color del borde: amarillo;
Puedes ver que empezamos por definir estilos para .mensaje, y luego ofrecer tres variantes con diferentes colores de borde. Cada variante primero se extiende .mensaje, heredando así todas sus reglas de estilo, antes de cambiar el color del borde.
La sintaxis idéntica al ejemplo anterior es lo que Tab Atkins está redactando como otra posible especificación para CSS nativo. Ya sea que esté de acuerdo o no con las extensiones (una característica cuyos beneficios se debaten acaloradamente), es genial ver a los cuidadores de CSS abrazar las ideas presentadas por los preprocesadores..
Si alguna vez se encuentra usando las funciones de manipulación de color del preprocesador, apreciará esta 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.
nav background: color-mod (# 79d3e2 matiz (360) saturación (100%));
El desarrollo se encuentra en las primeras etapas y, si bien hay rellenos automáticos disponibles, la sintaxis cambia con frecuencia (el actual color-mod solía ser color, por ejemplo).
Tyler Gaw hizo una herramienta realmente prolija (colorme.io) que te permite experimentar con todos los ajustes de color disponibles..
colorme.ioLas especificaciones para la función color-mod () se encuentran actualmente en modo borrador a través del Grupo de trabajo CSS.
De la misma manera que jQuery ayudó a mejorar la web, también tienen preprocesadores cuando se trata de CSS. Los lenguajes como Sass han ayudado a allanar el camino para nuevas ideas y enfoques aún no considerados por los autores de especificaciones de CSS.
Espero que las nuevas funciones de las que hemos hablado te inspiren a usarlas en tu propio trabajo; Le animo a considerar el uso de la funcionalidad nativa sobre un preprocesador siempre que sea posible!
Accentsconagua