Instrucciones:

  1. Instalación de Ruby
    • Windows: La instalación de Ruby para este Sistema Operativo se puede hacer mediante su instalador que se podrá descargar del siguiente enlace: http://www.rubyinstaller.org/
    • Mac OS X: Hay una cantidad de opciones en la plataforma Macintosh OS X para instalar la última versión de Ruby. Locomotive es una buena opción. El uso de DarwinPorts o Fink puede ser mejor para las personas con más conocimientos técnicos. En DarwinPorts, puedes instalar Ruby con: $ port install ruby Fink; tiene una interfaz gráfica (usando Fink Commander) para instalar Ruby.
    • LINUX/Ubuntu: En la mayoría de las distribuciones de este sistema operativo ya vienen preinstalado Ruby. Para verificar si ya tienes instalado Ruby solo es necesario abrir una terminal y ejecutar este comando: ruby -v, el cual mostrará la versión que tenemos de Ruby en caso de que ya esté instalada en el sistema operativo. En caso de no tener instalado Ruby se ejecuta el siguiente comando en la terminal:   sudo apt-get install ruby irb rdoc.
  2. Instalación de SASS:   Para la instalación de SASS en nuestro Sistema Operativo únicamente necesitamos abrir la línea de comandos (terminal) y ejecutar lo siguiente: gem install sass. Nota: El comando es el mismo para todos los sistemas operativos.
  3. Descarga de SCOUT (opcional para trabajar con SASS sin utilizar la linea de comandos): Se puede obtener del siguiente enlace: http://mhs.github.io/scout-app/

Primeros pasos en SASS

SASS es un preprocesador de CSS que nos permite ahorrar horas de trabajo en el desarrollo de cualquier tipo de aplicación web.

El código de este metalenguaje prácticamente es similar a CSS por lo que al desarrollador no se le dificultará crear código en él. Al comenzar a trabajar con SASS es necesario saber que todo el código deberá ir en un archivo con la extensión .scss, el cual hará referencia a un archivo de SASS.

Una vez terminado nuestro código y querer incluirlo a nuestras aplicaciones web, tendremos que generar el archivo .css con el código ya procesado, para esto ejecutaremos un comando en la terminal del sistema operativo y así poder obtenerlo. Para ejemplificar el tema vamos a crear un pequeño proyecto en el cual haremos uso de la herramienta SASS.

En esta ocasión vamos a crear 2 archivos con diferente extensión, uno para nuestro código HTML, y otro para el código de SASS.

Archivo: maqueta.html

Código HTML parte #1:

Código HTML parte #2:

ARCHIVO [sass]: estilos.scss


				// Archivo: estilos.scss
// Estos son los comentarios en SASS
// Nota: Los comentarios de SASS no aparecerán en el archivo CSS generado.

/* Archivo: estilos.css */
/* Estos son los comentarios en CSS, que aparecerán directamente en el archivo .css */

// Incializamos variables

$ancho_pagina: 100%; /* 100% del ancho de la ventana del navegador */

$tipo_fuente: arial, sans-serif;

$color_texto: #1D1D1D; /* Color Negro */

$fondo_negro: #333333; /* Color Gris Obscuro */
$fondo_blanco: #F1F1F1; /* Color Blanco */

// Comenzamos los estilos en SASS

*{
	padding: 0;
	margin: 0;
}

body {
	width: $ancho_pagina;
	vertical-align: top;
	font-family: $tipo_fuente;
	font-size: 1em;
	margin: auto;
	background-color: $fondo_negro;
	color: $color_texto;

	#content_wrapper{

		width: $ancho_pagina;
		min-height: 540px;
		position: relative;

		h1, h2, h3, p {
			margin: 0.5em;
		}

		a {
			color: #E44E2D;
			text-decoration: none;
			&:hover {
				color: red;
				text-decoration: underline;
			}
		}

		header, section, footer{
			width: 100%;
			*display: block;
		}

		header, footer {
			background-color: $fondo_negro;
			color: #F1F1F1;
			padding: .75em 0;
		}

		section {
			background-color: $fondo_blanco;
			padding: 1.25em 0;
			padding-bottom: 2em;
		}

		article, aside {
			background-color: $fondo_blanco;
			color: $color_texto;
			display: inline-block;
			vertical-align: top;
			line-height: 1.35em;
			*float: left;
			padding: 5px 5px;
			*display: block;
		}

		article {
			width: 67%;
			margin-right: 0 5px;
			border-right: 1px solid #CCCCCC;
		}

		article p {
			width: 92%;
			display: block;
			margin: auto;
		}

		aside {
			width: 29%;
			margin-right: 0;
		}

		footer {
			vertical-align: bottom;
			min-height: 120px;
		}

		.copyright {
			display: block;
			font-size: 1.10em;
			margin-bottom: 1.15em;
		}

		.text-shadow {
			color: #FFFFFF;
			text-shadow: 0px 0px 8px rgba(250,250,250,0.65);
		}

		.align-center {
			text-align: center;
		}

	}

}

Aplicar los archivos CSS generados por SASS

Hasta ahora sólo tenemos el archivo .html en donde estructuramos nuestro código HTML para realizar la maqueta de nuestra página web.

Por el momento la vista de nuestro diseño se muestra de la siguiente forma:

Al igual tenemos un archivo .scss donde estará todo nuestro código SASS para nuestro proyecto, sin embargo, el código de SASS no es procesado por la mayoría de los servidores, así que procederemos a generar un archivo con extensión .css en la línea de comandos:

sass –watch entrada.scss:salida.css

Aquí indicamos que vamos a trabajar con el preprocesador de SASS en donde el archivo de entrada es el que se especifica primero con la extensión .scss (archivo de SASS) y el de salida es el que se generará a partir del archivo SASS indicado después de los dos puntos ‘:’. Como estamos trabajando un el archivo “estilos.scss” vamos a obtener un archivo con el mismo nombre pero con la extensión CSS, así:

sass –watch estilos.scss:estilos.css

Ahora ya tendremos nuestro código CSS generado y el archivo tendrá el nombre de “estilos.css”.

Por último sólo nos queda agregar el link de nuestro archivo CSS generado al código HTML.

Esto se verá así dentro de la etiqueta “head” en el archivo “maqueta.html”.

Al finalizar el Proyecto se verá de esta forma:

Si pudiste generar el archivo CSS y lograr el diseño de la maqueta sin ningún problema, Felicidades!! ya estas listo para aplicar SASS en todos tus proyectos futuros. Espero y este contenido haya sido de gran ayuda, nos veremos en un post más adelante, Saludos!! 🙂

Enlaces de Referencia:

Michael Brandon Serrato Guerrero

Michael Brandon Serrato Guerrero

Soy un Chavo de 16 años, Desarrollador de Aplicaciones Web, Emprendedor de Proyectos nuevos y Gustoso por saber que dia a dia me lleno de Conocimientos nuevos que me abren paso a lograr grandes metas.

Un pensamiento en “Guía básica de SASS

  1. Hola que tal, me pareció muy interesante tu articulo, pero con tu ejemplo aun no me queda claro como podría mejorar mi codigo css..
    Por ejemplo cuando usas la variable de fuente y suponiendo que en mi sitio uso 3 fuentes distintas, pues podría crear tres variables para 3 fuentes y usarlas, pero eso es igual a que lo hiciera haciéndolo tradicionalmente…
    Podrías dar otro ejemplo de como sacarle mayor provecho a sass, ya que al momento no me queda muy claro.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Cerrar