Comunidad de diseño web y desarrollo en internet

Introducción a Sass y Compass

Hola a todos, en este tutorial veremos cómo generar CSS usando Sass y Compass, sus características y algunos ejemplos de uso para trabajar de manera dinámica y eficiente. Soy bastante nuevo en este foro, he venido aquí atraído por los vídeos de youtube que hace Freddy, y he visto que aquí hay tutoriales de Less pero no de Sass y Compass, así que aquí va mi aporte!

¿Qué es Sass?


Sass es un pre-procesador CSS igual que Less o Stylus. ¿Cuál es la ventaja de Sass frente a los otros?. Pues no mucha la verdad, son muy similares, sólo que a Sass se le pueden añadir utilidades como Compass y foundation zurb (es algo similar a Bootstrap).


Qué es Compass?


Compass nos facilita un montón de mixins que se le agregan a Sass, como border-radius, box-shadow y gradientes, con la ventaja que hace el CSS3 más fácil y no tienes que agregar todas las etiquetas propietarias tu mismo.


¿Empezamos con Sass y Compass?

Para poder utilizar Sass y Compass, debemos tener la gema de Ruby instalada, la forma más fácil es bajando el instalador en mi caso el instalador de win, lo puedes encontrar en la página de ruby y dejamos que se instale.

Cuando se instale vamos a nuestra consola, y allí escribimos las siguientes líneas:

Código :

$ gem update --system 
$ gem install compass


Cuando esté instalado sólo tenemos que decirle a Compass que nos cree un proyecto con el nombre que queramos en la ruta que queramos. Por ejemplo:

Código :

compass create web1


Compass creará una carpeta llamada web1 y ahí estarán todos los archivos que necesitamos! entramos a la carpeta web1 por medio del cmd, cd web1 y para matar dos pájaros de un tiro cuando estemos dentro de la carpeta por medio del cmd, le damos compass watch, esto hará que cada vez que cambiemos el CSS de la web el cambio se realizara!
No hay necesidad de instalar Sass, ya que Compass lo instala automáticamente.


Cómo usar Compass y Sass


Vamos a la carpeta y creamos nuestro index.html y vinculamos su CSS.

Código :

<linl rel="stylesheet" href="stylesheets/css/screen.css"/>


Vamos a nuestra carpeta llamada sass y editamos el archivo screen.scss y todos los cambios que hagamos allí se reflejarán automáticamente en nuestro navegador!

Características de Sass


Estas son algunas de las características de Sass, claro hay funciones y operaciones matemáticas más complejas, les motivo a que visiten a la web de Sass!

Variables

Las variables nos permiten guardar datos para ser reutilizados:

Código :

$color:red;
$size:10px;

p{
 color:$red;
 sfont-size:$size + 6;
}


Mixins

Los mixins nos permiten guardar un conglomerado de datos para ser reutilizados:

Código :

@mixin caja{
 display:inline-block;
 margin:10px;
 padding:10px;
 vertical-align:top;
}
#cajaUno{
width:50%;
@include caja;
}
#cajaDos{
width:35%;
@include caja;
}

Estas dos cajas quedarían una al lado de la otra.

Anidar elementos


Código :

ul.menu{
background:rgba(51,51,51,0.9);
list-style:none;

li{
display:inline-block;

a{
color:#fff;
text-decoration:none;
padding:10px 20px;

&:hover{
color:white;
      }
    }
  }
}


Ahora bien, sólo hablé de Sass, y dónde está compass?

Ejemplos de mixins en Compass


Pues ya dije, Compass son un montón de mixins para nuestro uso , veamos algunos ejemplos!

Código :

box{
border:1px solid black;
height:100px;
width:100px;
@include border-radius(5px);
}


El mixin no lo hicimos nosotros, está hecho ya en compass, por lo que nuestro css quedaría así, con todas las etiquetas propietarias de los navegadores que soporten la propiedad.

ejemplo 1

Código :

box{
border:1px solid black;
height:100px;
width:100px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}


ejemplo 2
$shadow-1:0px 1px 0px 1px black; <-- es la variable predefinida que nos dá compass, sta no se puede cambiar.

Código :

box{
width:100px;
height:100px;
@include boder-radius(5px);
@include box-shadow($shadow-1);
}

El CSS quedaría de la siguiente manera:

Código :

box{
border:1px solid black;
height:100px;
width:100px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
box-shadow:0px 1px 0px 1px black;
-webkit-box-shadow:0px 1px 0px 1px black;
-moz-box-shadow:0px 1px 0px 1px black;
}

Como ven nos ahorramos muchas etiquetas de éstas al usar Compass y muchas líneas de código al usar Sass. También Compass facilita el uso de sprites y gradientes CSS así como más utilidades. Yo lo estoy estudiando, más adelante les sigo platicando de estas dos herramientas!

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate