Crear hoja de estilos CSS con Compass y Sass

Hola amigos, hoy aprenderemos como podemos crear una hoja de estilo utilizando Sass un lenguaje orientado a crear hojas de estilos css complejas de manera rápida y muy fáciles de mantener.

Para entrar en el tema primero debemos conocer de algunos términos.

Sass (Syntactically Awesome Stylesheets) inicialmente diseñado por Hampton Catlin y desarrollado por Nathan Weizenbaum es un metalenguaje de Hojas de Estilo en Cascada (CSS). Sass consiste en dos sintaxis. La sintaxis original, llamada indented syntax («sintaxis indentada») que usa una sintaxis similar al Haml. Éste usa la indentación para separar bloques de código y el carácter nueva línea para separar reglas. La sintaxis más reciente, SCSS, usa el formato de bloques como CSS. Éste usa llaves para denotar bloques de código y punto y coma (;) para separar las líneas dentro de un bloque. La sintaxis indentada y los ficheros SCSS tienen las extensiones .sass y .scss respectivamente.

Compass es un framework construido sobre SASS que agrega pre-build mixins, herramientas de layout y mucho más.
Es también una herramienta desde la línea de comando (de hecho es una gema de Ruby) y la misma observa (watch) los archivos Sass por cambios y una vez detectados automáticamente los convierte y compila en CSS para el navegador.

Ahora que sabemos esto veremos como podemos instalar compass para comenzar a desarrollar en sass.

Lo primero que debemos hacer es instalar ruby ya que compass como mencione anteriormente es una gema de ruby y otros paquetes que vamos a necesitar mas adelante.


aptitude install ruby1.9.1 ruby1.9.1-dev build-essential

Una ves hecho esto ya podemos instalar compass para hacerlo simplemente ejecutamos el comando.


gem install compass

Este comando se encargara de instalar compass junto con todas las dependencias que tenga el mismo, para verificar que se instalo correctamente podemos listar las gemas instaladas con el comando.


gem list

A partir de aquí ya podemos crear nuestra hoja de estilos usando sass lo primero que debemos hacer es crear nuestro proyecto con compass para ello nos ubicamos en la carpeta principal de nuestro proyecto que para este caso la llamamos ejemplo_sass ubicada en /var/www y ejecutamos el comando.


compass create css

 

Esto nos creara una carpeta llamada css con un archivo de configuración config.rb y 2 subcarpetas llamadas sass stylesheets.

Editamos el config.rb con los directorios de las carpetas de nuestro proyecto.


require 'compass/import-once/activate'
# Require any additional compass plugins here.
 
# Set this to the root of your project when deployed:
http_path = "/var/www/ejemplo_sass/css"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

Y ejecutamos.


compass watch

Este comando lo que hará es auto compilar en el directorio stylesheets todos los archivos sass que creemos en el directorio sass y repetira este proceso cada ves que editemos el archivo.

Para finalizar abrimos nuestro editor favorito, en mi caso me gusta usar Sublime Text y creamos un archivo llamado index.html en la ruta principal de nuestro proyecto /var/www/ejemplo_sass con el siguiente código.

<!DOCTYPE html>
<html lang="es">
<head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/stylesheets/estilo.css">
        <title>Prueba Sass</title>
</head>
<body>
        <h1>Ejemplo Sass</h1>
        <table>
                <thead>
                        <tr>
                                <th>Parametro1</th>
                                <th>Parametro2</th>
                        </tr>
                </thead>
                <tbody>
                        <tr>
                                <td>1</td>
                                <td>2</td>
                        </tr>
                        <tr>
                                <td>3</td>
                                <td>4</td>
                        </tr>
                </tbody>
        </table>
</body>
</html>

Y dentro del directorio /var/www/ejemplo_sass/css/sass creamos un archivo llamado estilo.scss con el siguiente código.


$color: white;
$colorfondoth: black;
$colorfondotd: blue;
 
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
 
h1 {
        background-color: $colorfondotd;
        color: $color;
        font-size: 20px;
        text-align: center;
        @include border-radius(10px);
}
 
table {
 
        margin: auto;
        margin-top: 20px;
 
        thead {
                th {
                        border-collapse: collapse;
                        text-align: center;
                        padding: 5px 10px;
                }
 
                tr th {
                        color: $color;
                        background-color: $colorfondoth;
                }
        }
        tbody 
        {
 
                td {
                        border-collapse: collapse;
                        text-align: center;
                        padding: 5px 10px;
                }
                tr td {
                        color: $color;
                        background-color: $colorfondotd;
                }       
        }
        
}

 

Al guardar el archivo el compass se encarga de auto compilar nuestro archivo estilo.scss ubicado dentro de la carpeta sass y de crear otro llamado estilo.css dentro de la carpeta stylesheets que debe lucir de esta manera.

/* line 12, ../sass/estilo.scss */
h1 {
  background-color: blue;
  color: white;
  font-size: 20px;
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}
 
/* line 20, ../sass/estilo.scss */
table {
  margin: auto;
  margin-top: 20px;
}
/* line 26, ../sass/estilo.scss */
table thead th {
  border-collapse: collapse;
  text-align: center;
  padding: 5px 10px;
}
/* line 32, ../sass/estilo.scss */
table thead tr th {
  color: white;
  background-color: black;
}
/* line 40, ../sass/estilo.scss */
table tbody td {
  border-collapse: collapse;
  text-align: center;
  padding: 5px 10px;
}
/* line 45, ../sass/estilo.scss */
table tbody tr td {
  color: white;
  background-color: blue;
}

Buenos espero que este tutorial les sea útil para comenzar a programar en esta fantástica herramienta.

Tags: