Hojas de estilo sintácticamente impresionantes con Compass en Sass

En nuestro último post, hemos mencionado una vez acerca de Compass. Según el sitio oficial, se describe como un marco de creación de código abierto de CSS.

En resumen, Compass es una extensión de Sass y, como LESS Element of LESS, tiene un montón de CSS3 Mixins listos para usar, excepto que también ha agregado varias otras cosas que lo convierten en una herramienta complementaria más poderosa para Sass. Vamos a ver.

Instalación de Compass

Brújula, como Sass, Necesita ser instalado en nuestro sistema.. Pero, si está utilizando una aplicación como Scout App o Compass.app, esto no será necesario..

Sin ellos, tienes que hacerlo. “a mano” mediante Terminal / Símbolo del sistema. Para hacerlo, escriba la siguiente línea de comando;

En Mac / Linux Terminal

 sudo gema instalar brújula 

En el símbolo del sistema de Windows

 gema instalar brújula 

Si la instalación se realiza correctamente, debería recibir una notificación como se muestra a continuación;

Luego, ejecute la siguiente línea de comando en su directorio de trabajo para agregar Compass archivos de proyecto.

 brújula inicial 

Otras lecturas: Compass Documentación de línea de comandos

Configuración de la brújula

Si has ejecutado este comando brújula inicial, ahora debería tener un archivo llamado config.rb en su directorio de trabajo. Este archivo se utiliza para configurar el resultado del proyecto. Por ejemplo, podemos cambiar nuestros nombres de directorio preferidos.

 http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js" 

Elimina la línea de comentarios que genera Compass; nosotros fijamos cierto Si necesitamos que los comentarios sean impresos o falso si no tiene que.

 line_comments = false 

También podemos decidir la salida de CSS. Hay cuatro opciones que podemos seleccionar :expandido, :compacto, :comprimidoy :anidado. Por ahora, solo necesitamos que se amplíe, ya que todavía estamos en la etapa de desarrollo..

 output_style =: expandido 

Creo que estas configuraciones serán suficientes para la mayoría de los proyectos en general, pero siempre puede consultar esta documentación, Referencia de configuración de Compass, si necesita más preferencias..

Por último, necesitamos reloj cada archivo en el directorio con esta línea de comando;

 reloj de brújula 

Esta línea de comando, como en Sass, observará cada cambio de archivo y creará o actualizará los archivos CSS correspondientes. Pero recuerde, ejecute esta línea después de haber terminado de configurar el proyecto en config.rb, o de lo contrario simplemente ignorará los cambios en el archivo.

CSS3 Mixins

Antes de recorrer CSS3, en nuestra primaria. .scss archivo, necesitamos importar la brújula con la siguiente línea @import "brújula";, Esto importará todas las extensiones en Compass. Pero, si solo necesitamos CSS3 también podemos hacerlo más específicamente con esta línea. @import "compass / css3".

Otras lecturas: Compass CSS3.

Ahora, comencemos a crear algo con Saas y Compass. En el documento HTML, asumiendo que también ha creado uno, pondremos el siguiente marcado simple:

La idea también es simple; Crearemos una caja rotada con esquinas redondeadas, y a continuación se encuentran nuestros estilos anidados Sass para el motor de arranque;

 cuerpo fondo-color: # f3f3f3;  seccion ancho: 500px; margen: 50px auto 0; div ancho: 250px; altura: 250px; color de fondo: #ccc; margen: 0 auto;  

Y, para obtener nuestro rectángulo en las esquinas redondeadas, podemos incluir el Compass CSS3 Mixins de la siguiente manera;

 cuerpo fondo-color: # f3f3f3;  seccion ancho: 500px; margen: 50px auto 0; div ancho: 250px; altura: 250px; color de fondo: #ccc; margen: 0 auto; @include radio de borde;  

Esta radio del borde Los mixins generarán todos los prefijos del navegador y, por defecto, el radio de la esquina será 5px. Pero, también podemos especificar el radio a nuestra necesidad de esta manera @include radio-borde (10px); .

 sección div ancho: 250px; altura: 250px; color de fondo: #ccc; margen: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-radio-borde: 10px; -o-radio-borde: 10px; radio del borde: 10px;  

A continuación, según el plan, también rotaremos la caja. Es muy fácil hacerlo con Compass, todo lo que tenemos que hacer es simplemente llamar al método de transformación, así;

 cuerpo fondo-color: # f3f3f3;  seccion ancho: 500px; margen: 50px auto 0; div ancho: 250px; altura: 250px; color de fondo: #ccc; margen: 0 auto; @include radio-borde (10px); @include rotar;  

Este Mixins también generará esos prefijos de proveedores tediosos y la rotación tomará 45 grados por defecto. Vea el CSS generado a continuación.

 sección div ancho: 250px; altura: 250px; color de fondo: #ccc; margen: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-radio-borde: 10px; -o-radio-borde: 10px; radio del borde: 10px; -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -ms-transform: rotar (45deg); -o-transformar: rotar (45deg); transformar: girar (45deg);  

Ayudantes de brújula

Una de las características más poderosas de Compass son los Ayudantes. Según el sitio oficial, Los ayudantes de la brújula son funciones que aumentan las funciones proporcionadas por Sass.. Muy bien, echemos un vistazo a los siguientes ejemplos para obtener una imagen clara.

Añadiendo archivos de @ font-face

En este ejemplo, vamos a agregar una familia de fuentes personalizada con @Perfil delantero regla. En CSS3 simple, el código puede tener un aspecto similar al siguiente, que consta de cuatro tipos de fuente diferentes y también es difícil de recordar para algunas personas.

 @ font-face font-family: "MyFont"; src: formato url ('/ fonts / font.ttf') ('truetype'), formato url ('/ fonts / font.otf') ('opentype'), formato url ('/ fonts / font.woff') ('woff'), url ('/ fonts / font.eot') formato ('embedded-opentype');  

Con brújula Podemos hacer lo mismo más fácilmente con fuente-archivos () Ayudantes

 @include font-face ("MyFont", font-files ("font.ttf", "font.otf", "font.woff", "font.eot")); 

El código anterior generará un resultado que es exactamente el mismo que el primer fragmento de código, también detectará automáticamente el tipo de fuente y lo agregará a la fuente. formato() sintaxis.

Sin embargo, si observamos el código detenidamente, verá que no agregamos la ruta de la fuente (/ fuentes /). Entonces, ¿cómo supo Compass dónde están ubicadas las fuentes? Bueno, no te confundas, este camino en realidad se deriva de config.rb con fonts_path propiedad;

 fonts_dir = "fuentes" 

Entonces, digamos que lo cambiamos a fonts_dir = "myfonts", entonces el código generado será url ('/ myfonts / font.ttf'). De forma predeterminada, cuando no estamos especificando la ruta, Compass lo dirigirá a hojas de estilo / fuentes.

Añadiendo Imagen

Vamos a crear otro ejemplo, esta vez vamos a agregar una imagen. Agregar imágenes a través de CSS es una cosa común. Generalmente hacemos esto usando el imagen de fondo propiedad, como tal;

 div background-image: url ('/ img / the-image.png');  

En Compass, en lugar de usar el url () función, podemos reemplazarlo con URL de la imagen() Ayudantes y similares a sumar @Perfil delantero arriba, podemos ignorar completamente el camino y dejar que Compass se encargue del resto.

Este código también generará exactamente la misma declaración CSS que en el primer fragmento.

 div background-image: image-url (the-image.png);  

Además, Compass también tiene Image Dimension Helpers, que detecta principalmente el ancho y el alto de la imagen, por lo que en caso de que necesitemos que ambos estén especificados en nuestro CSS, podemos agregar dos líneas más, de la siguiente manera;

 div background-image: image-url ("images.png"); ancho: ancho de imagen ("images.png"); altura: imagen-altura ("images.png");  

La salida se convertirá en algo como esto;

 div background-image: url ('/ img / images.png? 1344774650'); ancho: 80px; altura: 80px;  

Otras lecturas: Compass Helper Functions

Pensamiento final

Muy bien, hemos discutido mucho sobre Compass hoy y, como pueden ver, es realmente una herramienta poderosa y nos permite escribir CSS de una manera más elegante..

Y, como ya sabías, Sass no es el único. Preprocesador CSS; También hay MENOS que hemos discutido a fondo antes. En la próxima publicación, trataremos de comparar, cara a cara, cuál de estos dos hace mejor el trabajo en el preprocesamiento de CSS.

• Descargar fuente