23 July 2017

CSS

By: Joel Robinson

Jugando Con Sass.

CSS

Sass es una extensión de CSS que añade potencia y elegancia a la lengua básica. Se permite el uso de las variables, reglas anidadas, mixins, las importaciones en línea, y más, todo con una sintaxis totalmente compatible con CSS. Sass ayuda a mantener grandes hojas de estilo bien organizados, y obtener pequeñas hojas de estilo en funcionamiento rápidamente, sobre todo con la ayuda de la biblioteca de estilos brújula Referencia.

Combinaremos diferentes funciones sass para crear un css que permita utilizar diferentes iconos.

$icons: (-at, -fb, -gmas, -tw);

.icon{
	@each $icon in $icons{
		&#{$icon}{
			background-image: url(../images/icon/am#{$icon}.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 100%;
			width: 100%;
		}
	}
}

Pasos:

1. Crearemos una lista.
2. Crearemos una estilo .icon que funcionara como selector principal.
3. Recorreremos la lista utilizando su contenido pasando sus datos de la variable $icons a $icon creando cada icono con su respectivo nombre.
4. Anidaremos la cadena de caracteres con la función &#{$icon} donde el símbolo & nos ayudara para hacerle referencia al selector principal y #{$icon} nos permitirá hacer la interpolación de una variable con una cadena.
5. Utilizaremos una ves mas la interpolación #{$icon} para llamar a cada imagen con su nombre correspondiente.

Resultado:

.icon-at{
	background-image: url(../images/icon/am-at.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 100%
	width: 100%
}

.icon-fb{
	background-image: url(../images/icon/am-fb.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 100%
	width: 100%
}

.icon-gmas{
	background-image: url(../images/icon/am-gmas.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 100%
	width: 100%
}

.icon-tw{
	background-image: url(../images/icon/am-tw.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 100%
	width: 100%
}

Conclusión: Este tipo de ejemplo lo podemos aplicar a muchos tipos de forma para crear diferentes listas css dependiendo de la necesidad, ahorrando digitar excesivas lineas de código siendo generadas automáticamente.