Tutorial de Sass Construyendo una vCard en línea con Sass y Compass

 
 
  
 
 
Thoriq Firdaus
 
[email protected]
 
(+62) 1.2345.678.9
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor neque, eleifend at pellentesque quis, convallis sit amet tellus. Etiam et auctor arcu.
 
 
 
 
 
 
Facebook
 
 Gorjeo
 
Google+
 
Dribbble
 
 
 
 

Como se puede ver arriba, las identidades sociales incluidas en el 'social'La sección está estructurada dentro de los elementos de la lista para que podamos visualizarlos de lado a lado. Cada uno de ellos recibe un nombre de clase siguiendo esta convención. social-facebook, social-twitter, social-google y así.

Configuración de la brújula

Necesitamos configurar Compass un poco sin comentar algunas líneas en config.rb archivo, como sigue:

 # Puede seleccionar su estilo de salida preferido aquí (se puede anular a través de la línea de comando): output_style =: expandido # Para habilitar rutas relativas a activos a través de las funciones de ayuda de brújula. Uncomment: relative_assets = true # Para deshabilitar los comentarios de depuración que muestran la ubicación original de sus selectores. Uncomment: line_comments = false 

Si no puedes encontrar config.rb archivo, probablemente no haya ejecutado este comando brújula inicial en tu directorio de proyectos.

Importando archivos

Ya que usaremos Compass, necesitamos importarlo usando;

 @import "brújula"; 

Y es mi preferencia personal restablecer los estilos predeterminados de los navegadores para que la salida se renderice de manera más consistente. Brújula, en este caso, tiene un módulo de reinicio. Este módulo se basa en el restablecimiento de CSS de Eric Meyer y se puede importar usando;

 @import "compass / reset"; 

Sin embargo, prefiero usar Normalize que afortunadamente También viene en formato Sass / Scss.. Descarga el archivo aquí, guárdalo en hablar con descaro a directorio de trabajo e importarlo en nuestra hoja de estilo.

 @import "normalizar"; 

Lectura recomendada: Revisar el nivel de prioridad de estilo CSS

Variables

Ciertamente tendremos unos pocos valores constantes en la hoja de estilo, por lo tanto los almacenaremos en variables y estas dos variables a continuación definirán el color base de nuestra vCard.

 $ base: #fff; $ oscuro: oscurecer ($ base, 10%); 

Mientras que la $ ancho variable a continuación será el ancho de nuestra página; También será la base para definir otros tamaños de elementos..

 $ ancho: 500px; $ espacio: $ ancho / 25; // = 20px 

Y el $ espacio Como puede ver, la variable será el espacio o tamaño de columna predeterminado en nuestra vCard, que en este ejemplo sería 20px;

Compass también tiene Ayudantes para detectar el tamaño de la imagen y haremos uso de esta función en nuestro perfil de imagen de la siguiente manera;

 $ img: ancho de imagen ("me.jpg") + (($ espacio / 4) * 2); 

El extra Adición de (($ espacio / 4) * 2) en el código anterior, es calcular el ancho total de la imagen, incluido el borde que enmarcará la imagen. Un marco generalmente tiene dos lados; arriba y abajo / izquierda y derecha, Es por eso que multiplicamos la resultado de la división por 2.

Herencia Selector

Aparentemente hay algunos selectores en nuestra hoja de estilo que tendrán las mismas reglas de estilo. Para evitar la repetición en nuestro código, deberemos especificar estos estilos en primer lugar y heredarlos con el @ampliar Directiva siempre que sea necesario. Este método, en Sass, se conoce como Herencia Selector, una característica muy útil que falta en MENOS.

 .float-left float: left;  .box-sizing @include box-sizing (border-box);  

Estilos

Cuando se haya configurado todo lo necesario, es hora de diseñar nuestra vCard, comenzando con un color de fondo para nuestro documento HTML;

 html altura: 100%; color de fondo: $ base;  

vCard

Los siguientes estilos definen el envoltorio vCard. Si ha estado trabajando con LESS anteriormente, este código le resultará familiar y fácil de digerir..

 .vcard ancho: $ ancho; margen: 50px auto; color de fondo: oscurecer ($ base, 5%); borde: 1px sólido $ oscuro; @include radio-borde (3px); ul relleno: 0; margen: 0; li estilo de lista: ninguno;  

El ancho de la envoltura hereda el valor de $ ancho variable. El color de fondo es más oscuro por 5% desde el color base, mientras que el color del borde será más oscuro por 10%. Esta coloración se consigue utilizando las funciones de color Sass..

La vCard también tendrá 3px radio de esquinas redondeadas que se logra utilizando Compass CSS3 Mixins; radio de borde (3px).

Sección Bio

Como hemos señalado al principio de este tutorial, la vCard se puede dividir en dos secciones. Estos estilos anidados a continuación definirán la primera sección que contiene el perfil de la imagen con algunos detalles (nombre, correo electrónico y teléfono).

 .bio border-bottom: 1px solid $ dark; relleno: $ espacio; @extender .box-sizing; img @extend .float-left; bloqueo de pantalla; borde: ($ espacio / 4) sólido #ffffff;  .detail @extender .float-left; @extender .box-sizing; color: oscurecer ($ base, 50%); margen: izquierda: $ espacio; parte inferior: $ espacio / 2;  ancho: $ ancho - (($ espacio * 3) + $ img); li &: antes de ancho: $ espacio; altura: $ espacio; margen derecho: $ espacio; Familia de fuentes: "ModernPictogramsNormal";  & .name: antes de contenido: "f";  & .email: antes de contenido: "m";  & .phone: antes de contenido: "N";  

Hay una cosa en el código anterior que creemos que necesita tomar nota. El ancho en .detalle El selector se especifica con esta ecuación. $ ancho - (($ espacio * 3) + $ img);.

Esta ecuación se utiliza para calcular dinámicamente el detalle de anchura restando el ancho del perfil de la imagen y los espacios (relleno y margen) del ancho total de vCard.

Seccion social

Los estilos a continuación son para la segunda sección en la vCard. En realidad no hay diferencia con el CSS simple aquí, solo que ahora están anidados, y algunos valores se definen con variables.

 .social color de fondo: $ oscuro; ancho: 100%; relleno: $ espacio; @extender .box-sizing; ul text-align: center; li display: inline-block; ancho: 32px; altura: 32px; a texto-decoración: ninguno; pantalla: bloque en línea; ancho: 100%; altura: 100%; texto-sangría: 100%; espacio en blanco: nowrap; desbordamiento: oculto;  

En esta sección, mostraremos los íconos de las redes sociales utilizando la técnica de sprite de imagen, y Compass tiene una función para hacer ese trabajo más rápido.

En primer lugar, debemos colocar nuestros íconos en una carpeta especial: nombremos la carpeta /social/, por ejemplo. De vuelta en la hoja de estilos, concatene esos íconos con lo siguiente @importar regla.

 @import "social / *. png"; 

los social/ arriba se refiere a la carpeta donde almacenamos los iconos. Esta carpeta debe estar anidada dentro de la carpeta de imágenes. Ahora, si echamos un vistazo a nuestra carpeta de imágenes, deberíamos ver una imagen de sprite generada con caracteres aleatorios, como social-sc805f18607.png. En este punto, todavía no sucede nada en el front-end, hasta que aplicamos los estilos con la siguiente línea.

 @incluir todos los sprites sociales; 

Resultado final

Finalmente, después de todo el trabajo duro, ahora podemos ver el resultado de esta manera:

En caso de que pensemos que 500px es demasiado amplio más adelante, solo necesitamos cambiar el valor en $ ancho variable - por ejemplo, 350px - el resto lo hará “por arte de magia” ser ajustado También puedes experimentar con la variable de color..

• Ver demostración
• Descargar fuente

Conclusión

En este tutorial, le mostramos cómo construir una vCard en línea simple con Sass y Compass; Sin embargo, esto es solo un ejemplo. Sass y Compass son poderosos, pero a veces no es necesario. Por ejemplo, cuando estamos trabajando en un sitio web con pocas páginas y probablemente solo necesitaremos menos líneas de estilos, el uso de Sass y Compass se considera excesivo..

Este post cierra nuestra serie Sass y esperamos que lo hayas disfrutado. Si tiene alguna pregunta relacionada con este tema, no dude en agregarla en el cuadro de comentarios a continuación..