Por qué ya no uso Compass para escribir CSS
Nota* SASS: hojas de estilo sintácticamente impresionantes, hojas de estilo programables en lenguaje extensible CSS); ¿Qué lenguaje de programación de estilos CSS elegir?
Sin embargo, hace aproximadamente un año abandoné Compass por completo. Lo eliminaré de nuestro proyecto. Quitarlo de mi propio sitio web. Lo eliminé del proyecto de mi lado. ¿Qué pasó? ¿Cómo pasé de "Compass es lo mejor" a "Ya no la necesito"?
Al principio pensé que Compass era mejor que Sass, hasta que me di cuenta de que no valía la pena. Al menos no vale la pena introducirlo en un proyecto todavía, especialmente porque Ruby Sass ya es lento...
De ninguna manera estoy diciendo que Compass sea inútil aquí. Tampoco estoy tratando de impedir que lo uses. Sólo quería mostrarte otra forma de hacerlo sin usar Compass.
Veamos qué puede hacer Compass:
Selección del navegador (-webkit, -moz, etc.) basada en la base de datos CanIUse (v1.0.);
Asistentes de funciones matemáticas, como cos, sin, pi, etc.
Asistentes de color, como sombras, tintes, etc.;
Asistentes de imagen, como sombras, tintes, etc.;
Asistentes de imagen, como sombras, tintes, etc.;
p>
Asistentes de imagen, como sombras, tonos, etc.;
Asistentes de imagen, como sombras, tonos, etc.
Asistentes de imagen como ancho y alto de imagen;
Fusiona automáticamente sectores de imagen. Nota* Las imágenes más pequeñas se combinan con imágenes más grandes para reducir las solicitudes de conexión
Hay muchos otros complementos
El prefijo automático no ha mejorado mucho
Anterior Hasta Compass 1.0.0, Compass gestionaba manualmente las interrupciones del navegador. Esto significa que cada vez que se genera o pasa un nuevo prefijo, se debe realizar una nueva solicitud para eliminar el prefijo mixto. No es ideal… razón por la cual Chris adoptó un enfoque más inteligente en la versión 1.0.0 para extraer datos directamente de CanIUse.
Al mismo tiempo, la muy popular biblioteca Autoprefixer
también puede lograr funciones similares. En este punto, tanto Compass
como Autoprefixer están 100% actualizados con los últimos prefijos del navegador, pero hay una diferencia importante entre los dos: en Compass aún necesitas agregar algunos prefijos y
Autoprefixer procesará estos prefijos durante la implementación y los agregará más adelante en la hoja de estilo. unicorn { @include transform(translateX(42em));}
Para usar el complemento Autoprefixer:
.unicorn { transformX(42em);}
Este último no sólo es más simple y corto, sino que también elimina la necesidad del atributo de prefijo de transformación, lo cual es bueno.
No usarás matemáticas muy a menudo
Me encanta que Sass nos brinda la posibilidad de hacer matemáticas en hojas de estilo. Cuando usamos el preprocesamiento de CSS, podemos mezclar variables, lo cual es una gran mejora con respecto al CSS que se basa en números pero ignora las operaciones matemáticas.
Lo más importante
Compass proporciona algunas funciones matemáticas avanzadas, como cos, sin, tan, sqrt, pow, pi y tal vez acos,
; asin, atan, operaciones logarítmicas y constantes e. En algunos casos, debo admitir que esta función es muy útil. Por ejemplo, en mi última publicación usé cos y
sin para crear la sombra combinada perfecta. Hace un tiempo recordé que necesitaba usar sqrt al cuadrado para alinear y rotar adecuadamente los pseudoelementos. Por tanto, son aplicables.
Sin embargo, sus casos de uso son tan raros que tuve que reconsiderar las buenas razones por las que Compass mantuvo las funciones matemáticas en el proyecto, y la implementación de estas funciones se puede lograr con Sass polyfill. Por ejemplo, aquí está la versión pura de Sass de la función pow:
// Función de potencia /// @param {Number} $x// @param {Number} $n// @return {Number }// @source /adambom/Sass- Math/blob/master/math.scss Sass-Math@function pow($x, $n) { $resultado: 1; @if $n >= 0 { @for $i de 1 a $n { $resultado: $resultado * $x }}@else { @for $ i de $n a 0 { $resultado: $resultado / $x } }}@return $resultado;}
Si necesita funciones matemáticas avanzadas en Sass, le recomiendo que consulte Sassy-Math.
Puedes implementar tus propias funciones de color
Diré que no estoy muy familiarizado con la implementación de la función de color Compass ya que nunca he usado ninguna de ellas. Pero Compass proporciona muchas funciones integradas para trabajar con colores y nunca sentí la necesidad de usarlas.
Aquí tienes un ejemplo. Implementar gradientes en CSS. Para facilitar el uso de mixins, escribí dos funciones muy cortas y las implementé en Compass.
/// Aclarar ligeramente un color /// @access public/// @param {Color} $color - el color a teñir /// @param {Number} $percentage - `$color ` El porcentaje en el color devuelto /// @return {Color}@function tint($color, $percentage) { @return mix($color, white, $percentage);}/// Hace que el color sea un poco más oscuro /// / @access public// @param {Color} $color - el color a teñir /// @param {Number} $percentage - el porcentaje de `$color` en el color devuelto /// @return {Color}@ función shade($color, $percentage) { @return mix($color, black, $percentage);}
De todos modos, no creo que sea necesario que Compass proporcione esta funcionalidad específicamente.
No tienes que depender de herramientas de imágenes
Veamos algunas cosas útiles. Compass está escrito en Ruby y proporciona ayudas de imágenes que calculan automáticamente propiedades como el ancho y la altura de la imagen en el ejemplo de clase. Esto es muy útil, especialmente cuando necesitas reemplazar una imagen sin preocuparte por los cambios de tamaño.
.logo { $ruta-logo: '/assets/images/logo.png'; ancho: ancho-imagen($ruta-logo); altura: altura-imagen($ruta-logo); //...}.
Desafortunadamente, no podemos escribir una función compatible con Polyfill para hacer esto; Sass no tiene acceso al sistema de archivos, por lo que no puede calcular las dimensiones de la imagen.
Hablando de eso, personalmente tiendo a usar SVG y trato de minimizar el uso de imágenes en mis proyectos. Dado que SVG es un gráfico vectorial escalable, no tengo que preocuparme por su tamaño. Lo he estado usando por un tiempo.
SVG Sprite tiene una ola de herramientas de fusión automática
Bien, ahora hablemos de Sprite Build, que siempre ha sido el punto culminante principal de Compass y puede fusionar automáticamente pequeños íconos en carpetas. y cree CSS Sprites en uno o dos minutos, tal vez menos.
@import "brújula/utilidades/sprites";
@import "mis-iconos/*.png";
@incluir todos-mis-iconos -sprites;
¡Creado automáticamente en nuestra hoja de estilo! Hay muchas otras opciones para CSS Sprite. Del mismo modo, simplemente usar la herramienta Sprite de Compass, sin importar lo buena que sea, me resulta extraño. No es necesario agrupar los dos, aunque puede haber algunos beneficios al hacerlo.
Nota* Consulte la herramienta de fusión automática de imágenes pequeñas de CSS Sprite (NodeJS, Python, Java, Ruby)
Acerca de LibSass
Compass no es compatible con LibSass. Dado que Compass todavía depende en gran medida de Ruby, no se puede usar Compass en un "entorno LibSass", y en el mundo actual donde LibSass está siendo adoptado por cada vez más personas, creo que el agnosticismo del lenguaje es un objetivo importante. Aparentemente, Chris está de acuerdo y está migrando Compass a LibSass.
Notas* LibSass: separa el lenguaje de hoja de estilo de la extensión Sass de sus dependencias del marco Ruby y lo convierte en una biblioteca de fácil referencia.