Trabajando con la parte delantera, que no puede evitar CSS (Hojas de Estilo en Cascada) – define la forma en que cada sitio web se ve en el navegador. Junto con HTML y JavaScript, CSS es considerado uno de los tres principales tecnologías utilizadas para la web. Sin embargo, algunos argumentan que es un poco primitivo y difícil de mantener. CSS fue inicialmente lanzado en 1996, y aunque no eran y todavía son constantes actualizaciones de la sintaxis básica no ha cambiado mucho. Aquí es donde una buena elección del preprocesador de CSS puede venir en práctico.
Tabla de Contenido
Primero de todo, ¿qué es un preprocesador de CSS?
Los navegadores de Internet sólo entender y escuchar a CSS, por lo que no puede ser sustituido por un lenguaje completamente nuevo. Sin embargo, tiene ciertas limitaciones, que no se siente importante en los proyectos pequeños, pero no tomar su peaje cuando usted está tratando con enormes hojas de estilo. Para evitar este problema, los desarrolladores el uso de preprocesadores de CSS. En su esencia, preprocesadores son programas que tienen su propia sintaxis. Después de escribir su código, compilarlo a puro CSS.
La razón por la que estamos utilizando preprocesadores de CSS es para agregar funcionalidades adicionales que CSS de otro modo no tendría. Por ejemplo, usted podría tener la anidación o la herencia de los selectores, así como mixins (reutilizable declaración de paquetes). El práctico características adicionales que le permiten ser más eficiente en tu trabajo diario y ofrecer mayor escalabilidad.
Que el preprocesador de CSS se debe utilizar?
La elección de un preprocesador de CSS no es una hazaña fácil. Al igual que con la mayoría de tecnologías de la información, usted tiene una variedad de opciones, cada una con sus propias ventajas y una apasionada de la base de usuarios. Para hacer una elección, usted necesita saber sus opciones, reconocer sus fortalezas, y entender las diferencias.
Sass vs SECS
Introducido por primera vez en 2006, Sass (Sintácticamente Impresionante Hojas de Estilo – un juego agradable en el nombre oficial de CSS) es considerado el pionero de los preprocesadores de CSS. No es de extrañar que también es el más popular! Sass es también utilizado en Bootstrap 4, que actualmente es uno de los más ampliamente utilizados extremo delantero marcos en el mundo y por lo tanto un destacado creador de tendencias en el mundo de las TI.
A partir de ahora, se ha separado en dos sintaxis: Sass y SECS. Mientras que sólo el primero que existió en las primeras versiones de el preprocesador, el equipo consiguió preocupado de que podría ser un poco demasiado diferente de la llanura de CSS. Por lo tanto, se presentó una nueva sintaxis de la llamada SECS (Sassy CSS) en la tercera versión. Los archivos también pueden tener una .sass o un .secs extensión.
La principal diferencia entre Sass y SECS es que el último utiliza el punto y coma y los soportes de la misma manera CSS no. Sass, por otro lado, no – más, se utiliza un signo de igual en lugar de un signo de dos puntos para la asignación. Mientras SECS es ahora oficialmente el principal sintaxis de la CSS Sass preprocesador, hay no hay planes para que nunca van a dejar de usar la versión original. Algunos desarrolladores afirman que es en realidad más fácil de leer debido a ser más conciso. Sin embargo, SECS es mucho más fácil, tanto para aprender e integrar a CSS.
Menos
Menos (más delgado Hojas de Estilo) apareció por primera vez en 2009. Fue influenciado por Sass, pero tenía su propia influencia en el posterior introdujo SECS formato. Por qué? Porque a diferencia de la primera versión de la sintaxis de Sass, este preprocesador de CSS originalmente fue creado con la intención de ser tan similar a la CSS como sea posible. No sólo esto significó una curva de aprendizaje más suave, pero también podría utilizar cualquier pre-escrito código CSS válido en Menos. Al Menos el preprocesador de CSS está escrito en JavaScript, que también simplifica la instalación.
Comparando Menos vs Sass, vamos a ver que son un montón, igual en sus funciones básicas. Ambos permiten el anidamiento, importación y uso de variables. Sin embargo, en Menos, usted también puede grúa variables y extracto de determinados componentes de un color que no podía con Sass – es decir, el tono, la saturación, luminocity, y el brillo. Por otro lado, Sass permite el uso de instrucciones if y interpolar en los selectores y los nombres de propiedad. Su sintaxis también contiene ternario de los operadores y de anidación de coleccionistas y Menos, por desgracia, no.
Otra pequeña desventaja de Menos es que se utiliza el @ símbolo para la declaración de variable (Sass utiliza el $ firmar en su lugar). Sin embargo, en CSS, @ también puede ser utilizado para los fotogramas clave y preguntas de los medios. Esto puede causar un poco de confusión a la hora de leer el código.
Lápiz
Otro de preprocesador CSS llamado Stylus apareció en el mercado en 2010. Si bien tiene una notablemente más pequeño de usuario de la base de Sass o Menos, vale la pena echar un vistazo a. Lápiz está escrito en Node.js y es por lo tanto una opción atractiva para aquellos que ya están familiarizados con el medio ambiente. También cuenta con útiles funciones integradas y mixins.
Lo que hace Lápiz distintos primera y principal es su flexibilidad: coma, punto y coma, y comas son opcionales. Además, usted no necesita llaves para definir bloques de código: en lugar de símbolos, con el Lápiz utiliza hendiduras para que. Como para las variables, puede utilizar los $ signo como en Sass… Pero también podría saltar. No es gran cosa.
Todo esto permite escribir menos y tener un limpiador de código. Por desgracia, algunos desarrolladores de hecho encontrar esta flexibilidad a ser un defecto. El no tener claro los identificadores hace que el código sea difícil de leer y entender, especialmente en grandes proyectos. Lo que se obtiene es una libertad causados por la anarquía, por así decirlo. Si comparamos Lápiz vs Sass, este último claramente tiene un borde con su fácilmente legible el código.
PostCSS
Vamos a empezar diciendo una cosa clara: PostCSS es no realmente un preprocesador de CSS. Mientras que el equipo hizo uso el término en primer lugar, que más tarde se dirigieron a su error. Puede ser utilizado como un preprocesador, un post-procesador – de hecho, un procesador de todos los tipos, que también puede ayudarle a optimizar, limpiar el código, y realizar todo tipo de tareas. PostCSS es, en su esencia, una API con una tonelada de empoderamiento de JavaScript, plugins disponibles (usted puede escribir su propio bien). El uso de ellos, usted puede procesar CSS y crear herramientas personalizadas.
PostCSS fue inicialmente lanzado en 2013 y actualmente está en la versión 7. Se puede utilizar con ambos llanura sintaxis de CSS y el de los preprocesadores mencionados anteriormente. Lo que le da una ligera ventaja sobre Sass, Less, y otros preprocesadores de CSS es la modularidad. Le permite seleccionar y elegir las características que usted necesita, así como para trabajar más rápido. No es de extrañar que su popularidad está creciendo rápidamente – incluso ha habido declaraciones públicas que puedan ser utilizados en la próxima versión de Bootstrap.
¿Qué más hay que saber?
Preprocesadores de CSS añadir un paso necesario para la compilación, lo que puede ralentizar el desarrollo y la depuración. La final que se genera el archivo CSS también puede ser bastante grande.
Sin embargo, las ventajas superan con creces a las desventajas en este punto. Variables, mixins, anidación, de múltiples funciones extra – todas estas características hacen de la escritura y el mantenimiento de un código mucho más conveniente. Elegir un preprocesador se sienta más cómodo y disfrute de la extensa funcionalidades de CSS ahora!