Share
La comunidad de desarrollo web recibió recientemente una gran noticia. Si bien aún no están en los locales nocturnos, las experimentaciones están, una vez más, en curso, las cuales, si tienen éxito, nos brindarán soporte nativo para las variables de CSS, las combinaciones y los módulos en los navegadores. La pregunta es, sin embargo, ¿es esto algo bueno??
Antes de progresar, tenga en cuenta que estos desarrollos aún se encuentran en las etapas experimentales. Aún no se han implementado en ningún navegador..
Si está familiarizado modestamente con los preprocesadores de CSS, como Less o SASS, tendrá una comprensión básica de qué esperar de estas adiciones. (Dicho esto, la sintaxis propuesta desafortunadamente es un poco diferente). En el futuro, tendrá la capacidad de crear variables (globales y locales) y mixins, que se pueden considerar como una colección de estilos que pueden ser fácilmente referenciado.
Desde que tengo memoria, la comunidad ha estado clamando por las variables CSS; Entonces, ¿qué fue el atraco? En una palabra: el desacuerdo. De hecho, en 2008, el webkit estaba jugando con esta característica, incluso hasta el punto de implementarla en las noches, sin embargo, la propuesta se estancó poco después. Muchos sintieron que transformar CSS en un más como programador El lenguaje solo introduciría frustración; Algunos incluso sintieron que podría confundir a los diseñadores. Por ejemplo, si el color primario de su proyecto se almacena dentro de una variable, probablemente en la parte superior de su hoja de estilo, entonces se requeriría que el diseñador haga referencia a dos ubicaciones.
@myColor: rojo;
/ * Menos sintaxis * / #someElem color: @myColor;
Si bien este argumento es válido hasta cierto punto, no tiene mucho peso. La mayoría de los diseñadores mantienen un conjunto de colores del sitio en la parte superior de su hoja de estilo, que utilizan como referencia. La introducción de variables para contener estos valores es una solución lógica..
Los fanáticos de SASS o menos estarán acostumbrados a definir variables como las siguientes:
/ * Less * / @primary_color: red; / * SASS * / $ primary_color: red;
La sintaxis propuesta complica un poco las cosas al escribir las variables. Por ejemplo:
/ * Declaración * / @var primary_color color rojo; / * Uso * / body color: var (primary_color);
Accentsconagua
@var color palabra clave en el código de arriba. var función, y pasar en el nombre de la variable. Debo admitir: parece un poco redundante usar el @var directiva. La sintaxis que usa SASS y Less parece más apropiada y limpia. @myVar es más sucinto que @var myVar.
Los tipos de variables son una adición bienvenida, por otro lado.
Las variables se escriben. Cada tipo de valor primitivo, cada propiedad y algunos tipos de conveniencia adicionales existen. Esto nos permite exponer las nuevas cosas de CSSOM en ellos:
document.styleSheets [0] .vars ['primary_color']. alpha = .5;
-- xanthir.com
Las variables también tendrán la posibilidad de ser objeto de un cuadro de declaración, a través del uso del @local directiva. Esto puede ser útil cuando una variable solo debe usarse una o dos veces dentro de un proyecto.
.caja / * Declaración * / @local box_gradient background linear-gradient (top, black, white); / * Uso * / background: var (box_gradient);
Las mezclas pueden ser increíblemente útiles. De hecho, cubrimos el proceso de crear un archivo de clase de mezclas no hace mucho tiempo en Nettuts +. Puede leer sobre esto aquí, aunque tenga en cuenta que las técnicas presentadas en ese artículo se basan en el preprocesador Less. Los nuevos experimentos, una vez más, utilizan una sintaxis ligeramente diferente.
/ * Less * / .border-radius (@radius: 3px) -webkit-border-radius: @radius; -moz-border-radius: @radius; radio del borde: @radius; / * SASS * / @mixin border-radius ($ radius: 3px) -webkit-border-radius: $ radius; -moz-border-radius: $ radio; radio del borde: $ radio; / * ¿Y posiblemente la solución nativa? * / @mixin radio-borde (longitud del radio 3px) -webkit-border-radius: var (radio); -moz-border-radius: var (radio); radio del borde: var (radio);
Tenga en cuenta las similitudes entre SASS y la solución nativa propuesta para los mixins. Esto se debe a que los miembros del equipo de SASS prestan servicios como asesores..
Como debe saber, Less y SASS le permiten nido selectores Esto puede reducir drásticamente el tamaño de sus hojas de estilo, ya que elimina la necesidad del mismo selector repetidamente.
/ * La forma actual * / #content … #content p … #content pa … #content pa: hover … / * Less y SASS * / #content … p … a … & : hover … / * ¿Y de forma nativa? * / #content … @this> p … @this> a … @this: hover …
Mientras que la sintaxis propuesta es más verboso, para su crédito, tiene una buena sintaxis similar a OO, que hará que muchos desarrolladores se sientan como en casa.
Pero recuerda: no todos los diseñadores son desarrolladores..
Por defecto, en Menos, todas las variables son, para todos los propósitos y propósitos, globales. Como resultado, se vuelve difícil distribuir el código, ya que los nombres de variables existentes pueden sobrescribirse. La posible solución nativa será implementar módulos o espacios de nombres. Entonces pueden ser incluido en un bloque añadiendo el @utilizar directiva.
Sitio @module @var primary_color color # 292929; @var secondary_color color azul; @mixin radio-borde (longitud del radio 3px) … radio-borde: 3px; / * Uso incorrecto * / body color: var (primary_color); // El nombre de la variable no está definido / * Correcto * / body @use Site; color: var (primary_color); // # 292929 (Obras)
Como se señaló al comienzo de este artículo, la documentación que se menciona anteriormente todavía se encuentra en las etapas experimentales. Es posible, incluso probable, que la sintaxis cambie, en función de tu realimentación. Así que vamos a tenerlo. ¿La idea de variables nativas en mixins en tu CSS te excita ... o te asusta??
¿Yo? Bueno, yo estoy de acuerdo. Creo que la sintaxis propuesta podría requerir un poco de trabajo, ya que sin duda asustará a los diseñadores entre nosotros. Dicho esto, si la sintaxis se simplificó un poco, estoy 100% a bordo. Qué hay de tí?
