Muchos diseñadores usan algún tipo de preprocesador CSS, ya sea Hablar con descaro a , MENOS o Aguja . Si usó alguno de estos, probablemente también sepa que Compass es un marco construido en Sass, y aunque su instalación puede ser desagradable, una vez que la use descubrirá rápidamente que es una de las mejores habilidades el diseñador web puede aprender.
Si nunca antes has usado Sass, te recomendaría que eches un vistazo a WDD's introducción a Sass.
Compass funciona como un marco para su CSS. Cuando trabajas en un proyecto grande, es fácil que las cosas se salgan de control y, a menudo, encontrar cosas en tu propio CSS es un desafío. Compass intenta solucionar estos problemas, con la ventaja adicional de trabajar con prefijos de proveedor.
Como dije antes, Compass es un marco para su CSS que resuelve algunos de los problemas con el lenguaje. También incluye algunas herramientas para hacer el desarrollo más rápido y más fácil:
Al igual que Sass y LESS, Compass es solo una herramienta para simplificar el diseño de un sitio web.
Compass es una gema Ruby, por lo que para instalarlo primero debe tener instalado Ruby en su máquina. Afortunadamente, la instalación de Ruby es simple, en Windows solo necesitas descargar esto Ruby Installer para Windows , en Mac / Linux siga las instrucciones en Ruby sitio.
Una vez que tenga instalado Ruby, instalar la brújula es tan fácil como esto:
gem install compassEsto instalará Compass y Sass.
Si quieres crear un proyecto de Compass, entonces debes escribir:
compass create /path/to/projectcd /path/to/projectcompass watchEstas tres líneas de código significan que cada vez que cambie un archivo Sass se compilarán automáticamente en CSS.
Alternativamente, podrías usar Codekit (Mac) o Prepros (Windows) para compilar el Sass cuando se guarda.
Compass se divide en módulos y para comenzar a utilizar sus utilidades, primero tenemos que importar el módulo que queremos en nuestro archivo .scss principal. Por ejemplo, para importar el módulo CSS3 que usaríamos:
@import "compass/css3";Ahora podemos comenzar a usar las utilidades y mixins que ofrece Compass para las nuevas propiedades que vienen con CSS3. Lo mejor de esto es que no tenemos que escribir prefijos de proveedor una y otra vez, lo que siempre ha sido un problema cuando se trata de CSS3.
Aquí hay un ejemplo, si quisiéramos crear un diseño simple de 3 columnas con un canal de 20 píxeles, en CSS tendremos que escribir:
div{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;}Puede ver qué tan inmanejable hace nuestro código rápidamente. Con la ayuda de Compass y Sass, todo lo que necesitamos es esto:
div{@include column-count(3);@include column-gap(20px);}Como puede ver, hemos eliminado los prefijos del proveedor, y lo que tomó 6 líneas de CSS logramos en solo 2.
Otro ejemplo de CSS que requiere mucha escritura, son los degradados. Así es como escribimos un simple degradado de blanco a negro en CSS:
.gradient{background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #000000));background-image: -webkit-linear-gradient(#ffffff, #000000);background-image: -moz-linear-gradient(#ffffff, #000000);background-image: -o-linear-gradient(#ffffff, #000000);background-image: linear-gradient(#ffffff, #000000);}Crear el mismo efecto con Compass es tan simple como:
.gradient{@include background-image(linear-gradient(#fff, #000));}Esto no solo reduce significativamente la cantidad de código, pero si desea cambiar los colores, en la versión de Compass solo tiene que cambiarlos una vez.
Hay una lista completa de abreviado propiedades CSS3 aquí.
Compass también incluye algunos ayudantes para enlaces, uno de los cuales es un ahorro de tiempo real. Primero, debemos incluir el modelo de tipografía como el inicio de nuestro archivo Sass principal:
@import "compass/typography"El módulo de tipografía tiene una gran taquigrafía para el diseño de colores, así:
a{// link colors (normal, hover, active, visited, focus)@include link-colors(red, blue, grey, red, blue);}Esto es lo mejor de Compass; toma el código que usamos a diario y nos da versiones abreviadas.
Este artículo fue solo una breve introducción a Compass, pero si encuentras el tema tan emocionante como yo, entonces te recomiendo encarecidamente echa un vistazo a su sitio web y explore más de las utilidades que están disponibles.
Espero que ahora considere usar Compass y Sass en sus proyectos, porque realmente son increíbles adiciones a la caja de herramientas del diseñador web.
¿Usas Compass o Sass? ¿Prefieres un preprocesador diferente? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen de brújula a través de Shutterstock.