Es una nueva comunidad sobre el reciente estándar de la web Html5, donde puedes encontrar tutoriales, tips, consejos, información, noticias y demás en un solo lugar.

Sass para aplicar en proyectos CSS y HTML5


  Publicado hace |  Etiquetas: , , , , , , , , , , , , , , , , , , ,

El pasado miércoles 15 de agosto en ninjacodetv estuvimos hablando en la segunda parte del programa sobre Frameworks Frontend y queriamos profundizar el tema hablando de Foundation 3; un excelente framework construido con Sass en lo que a CSS se refiere.

Sass es un meta-lenguaje para escribir CSS que se utiliza para describir el estilo de un documento de manera limpia y estructural, de todos modos en el siguiente enlace tienes una excelente descripción.

Que necesitamos para iniciar a construir y maquetar con Sass?

Tener instalada la Gema de Ruby (Si! Quieres profundizar en Ruby el siguiente enlace te ayudara) pero tranquilo no necesita tener conocimientos en Ruby para utilizar Sass:

Repositorio de ejercicios y maquetación (mock-up):

El repositorio lo encuentran en GitHub con todos lo archivos necesarios para el ejemplo la estructura es la siguiente

  • excercises: Esta carpeta contiene los ejercicios para los fundamentos de  Sass
  • mock-up: Contiene ejemplo de la maqueta que se realizo durante el ninjacode del miercoles 15 de Agosto un mock-up de un sitio web básico aplicando  Sass
Instalación en Linux y Mac OS:

En un terminal con los permisos suficientes de usuario, le indicamos al shell la siguiente instrucción:

$ gem install sass
Instalación en Windows

Windows no viene con Ruby. El instalador más sencillo para Ruby es RubyInstaller. Una vez que Ruby ha sido instalado, es necesario acceder a la línea de comandos, luego de estar allí utiliza la misma instrucción para instalarlo en Linux y Mac OS.

Editor de Código y extensión

Para estos ejercicios vamos a utilizar Sublime Text 2 y una extensión para que entienda y nos ayude con la sintaxis de SassNo vamos a instalar el paquete que encontramos en el Package Control llamado “Sass” ya que este es más enfocado a Haml; que es el siguiente paso en la generación de vistas en aplicaciones para Rails, por este motivo repito no se debe instalar. En lugar de este vamos a instalar Sublime-Text-2-SASS-Package de la manera que indica el autor del mismo.

Y como Pre-compilar el Código que generamos en Sass

En el momento lo vamos hacer con dos formas conocidas:

Manualmente

Se refiere a la forma más básica de obtener nuestros archivos pre-compilados con la extensión “.css”, lo hacemos en linea de comandos o Shell de la siguiente manera:

sass --watch archivo_origen.scss:archivo_destino.css

También en Sass manejo diferentes especificaciones para el resultado final, en un ambiente de producción es mejor tener un archivo con nuestros estilos de manera que ocupe el menor espacio y consumo. En Sass se le llama “compressed” y la linea de comandos es la siguiente:

sass --watch --style compressed archivo_origen.scss:archivo_destino.css
Instalando Compass

Compass es una herramienta de código abierto para creación de Framewors en CSS, por el momento lo instalaremos y un siguiente post lo utilizaremos:

Con Ruby instalado y en linea de comandos, damos la siguientes instrucciones

$ gem update --system
$ gem install compass

Usando Scout (Opcional)

No todos se sienten cómodos usando la línea de comandos. Una gran aplicación para ayudarle a utilizar  Sass es Scout.
Scout es una interfaz gráfica de usuario (GUI) que clasifica automáticamente todos nuestros archivos escritos en  Sass y junto con Ruby ejecutan los resultados finales de nuestros archivos, en conclusión no necesitarías saber acerca de la línea de comandos en absoluto.

Conceptos de Sass

Entonces que es SassEs una extensión de CSS3, que agrega reglas de anidado, variables, mixins, herencias de un selector, y algunas cosas más. Primero conoceremos conceptos de la sintaxis para aplicar en una posterior maqueta que crearemos.

Alcance de un Selector en Sass

Aspecto central de  Sass: anidación. Si trabajas con CSS desde hace tiempo, sabes las ventajas de dar más selectores específicos para tus hojas de estilo. En este punto es algo importante explicar una de las filosofías de  Sass y es que no exista DRY (Don’t Repeat Yourself) algo así como en lo más mínimo repetir código y es una buena cosa del alcance de un selector en  Sass, ejemplo de esto:

En CSS:

   .recuadro{
        width: 200px;
   }
   .recuadro .mensaje{
             border: 1px solid red;
   }
   .recuadro .mensaje .titulo{
             color: red;
   }
   .recuadro .usuario{
            border: 2px solid black;
   }
   .recuadro .usuario .titulo{
            color: black;
  }

En Sass teniendo en cuenta la filosofía DRY, este ejemplo se encuentra en el Repositorio del Post en excersices/alcanceSelector.scss:

   // Comentario que sólo se refleja en Sass y los .scss
   // En el momento del archivo final en .css no se tienen en cuenta
  // este tipo de comentarios
   .recuadro{
      width: 200px;
      .mensaje {
            border: 1px solid red;
            .titulo { color: red;}
      }
     .usuario{
            border: 2px solid black;
            .titulo{ color: black;}
    }

Si te das cuenta es más facil de entender este código y fuera de eso nos ahorramos unas lineas y volver a escribir selectores para referirnos a la etiqueta indicada, por otro lado aprendimos como se hacen los comentarios en los documentos  Sass.  Para pre-compilar el código utilizas el siguiente comando de ejemplo en la linea de comandos o Shell:

sass --watch alcanceSelector.scss:alcanceSelector.css

Variables en Sass

Esta es una de las cosas interesantes de esta herramienta, el manejo de variables ahorra mucho tiempo sobre todo cuando se tienen archivos CSS con más de mil (1000) lineas de Código, cualquier cambio en un valor común seria muy dispendioso verificar linea por linea que se efectuó de manera correcta, o con la herramienta de búsqueda de los editores de código si se reemplazaron todas y no se cometió algún error con otro atributo. Las variables se declaran con el símbolo “$” Ejemplo de ello seria la variable $color_negro: #333; Podemos utilizar variables para representar los colores, tamaños, porcentajes, y varias otras cosas que son menos utilizadas. Cualquier cosa que usted puede poner a la derecha de una propiedad CSS es fácil de entender por Sass. Vamos a ver un ejemplo primero como seria en CSS y luego en Sass:

en CSS como lo conocemos

body  {
     width: 965px;
     background: white;
     font-color: #222222;
     margin: 5px 5px 10px 20px;
}
body h1 {
     font-color: #567654;
}
En Sass este ejemplo se encuentra en el Repositorio del Post en excersices/variable.scss:
// Declaración de variables para Sass
$primary_color: #222;
$secondary_color: #567654;
$page_width: 965px;

body{
    width: $page_width;
    background: white;
    font-color: $primary_color;
    margin: 5px 5px 10px 20px;
    // Recuerde el alcance de un Selector en Sass
    h1{
      font-color: $secondary_color;
   }
}

Para pre-compilar el código utilizas el siguiente comando de ejemplo en la linea de comandos o Shell:

sass --watch variable.scss:variable.css

Operaciones en el Layout

No es de las cosas que creo aplicar todo el tiempo. Una vez que hemos definido una variable, Sass nos permite realizar operaciones básicas en esa variable con operadores como sumar, restar, multiplicar y dividir (+, -, *  y /). El siguiente ejemplo tomando en cuenta el ejemplo anterior de variables.

body {
   width: 482.5px;
   background: white;
   font-color: #222222;
   margin: 2.5px 7px 8px 6px;
}
body h1 {
   font-color: #567654;
}
En Sass este ejemplo se encuentra en el Repositorio del Post en excersices/operaciones.scss:
$primary_color: #222;
$secondary_color: #567654;
$page_width: 965px;
$page_pargin_a: 5px;
$page_pargin_b: 10px;
body{
      // operacion de division
      width: $page_width / 2;
      background: white;
      font-color: $primary_color;
      // operaciones de: division, suma, resta y multiplicación
      margin: $page_pargin_a / 2 $page_pargin_a + 2 $page_pargin_b - 2 $page_pargin_b * 4;
      // Recuerde el alcance de un Selector en Sass
      h1{
        font-color: $secondary_color;
     }
}

Recuerda! Para pre-compilar el código utilizas el siguiente comando de ejemplo en la linea de comandos o Shell:

sass --watch operaciones.scss:operaciones.css

Jugando con los colores en Sass

La alteración de una paleta de colores es siempre un dolor de cabeza en un proyecto. Si queremos un color menos saturado, nos vamos a la carta de colores, y encontrar un color que es más ligero o más oscuro, luego es necesario volver a colocar el valor hexadecimal original. Con Sass estas conversiones son mucho más fácil con funciones como aclarar y oscurecer, saturar y desaturar, entre otras más que encuentras en la documentación oficial. En este ejemplo vamos a utilizar las cuatro primeras mencionadas.

En Sass este ejemplo se encuentra en el Repositorio del Post en excersices/colores.scss:

</p>
// Lighten/Darken
#ajaxMan{
 color: lighten(#699CCC, 20%);
}
// Advanced Lighten/Darken
$color: lighten(#333, 52%);
#ajaxManBox{
 font-color: $color;
}
// Saturate/Desaturate
$colorMan: #336699;
#pageMan{
 color: saturate($colorMan, 15%);
}
// change Hue
$colorGirl: #454545;
#ajaxBoy{
 color: adjust-hue($colorGirl, 180);
 > .ajaxChild{
 color: adjust-hue(desaturate($colorGirl, 82%), 75);
 }
}
// Desaturate 100% with grayscale
#ajaxGirl{
 color: grayscale($colorGirl);
}
// Or
#ajaxPet{
 color: desaturate($colorGirl, 100%);
}
// Mixcolor => Sancocholoco
#PageGirl{
 color: mix(#222, #993233);
}

Para pre-compilar el código utilizas el siguiente comando de ejemplo en la linea de comandos o Shell:

sass --watch colores.scss:colores.css

Mantener un código limpio, con Mixins

Mixins son algunos de los elementos más poderosos de  Sass. Un mixin es un fragmento de  Sass que puede aplicarse fácilmente a otro selector. Para definir un mixin, todo lo que necesitas para escribir es @mixin, seguido por el nombre de la mixin y su estilo. Una vez que la hemos definido, podemos fácilmente utilizar un mixin donde nos plazca, es un conjunto super portátil de atributos. Cuando se desea utilizar el mixin, sólo es llamarlo con la etiqueta @include. Mixins también nos ayudan a mantener nuestro código de semántico. Es útil tener mixins en una hoja de estilo por separado, manteniendo la limpieza principal de la hoja de estilo. Si este es el caso, tenemos que utilizar la técnica de agrupación, que es llamando en el mismo directorio donde se encuentra nuestro archivo que requiere de otro con la palabra clave @import en la parte superior de su archivo principal  Sass, que une en el archivo de mixins. Vamos hacer un ejemplo con los famosos bordes redondeados, pero que sea crossbrowser, adicional a esto se aplica otra de las bondades; el paso de parámetros por referencia como en las funciones de la mayoría de lenguajes:

En Sass este ejemplo se encuentra en el Repositorio del Post en excersices/bordes.scss:

// Declaramos el mixin con @mixin y siguiente a esto
// los atributos
// pasamos dos valores por referencia $width y $rounding
 @mixin border_rounder($width: 2px, $rounding: 4px){
        -moz-border-radius: $rounding $rounding;
        -webkit-border-radius: $rounding $rounding;
        -khtml-border-radius: $rounding $rounding;
        -o-border-radius: $rounding $rounding;
        border-radius: $rounding $rounding;
        border: $rounding $rounding;
        width: $width;
 }

En este punto no existe la pre-compilación pues depende de que sea llamado desde otra hoja de estilos, ademas que no tiene ningún selector definido

Ahora vamos a crear nuestro ejemplo donde utilizaremos los bordes redondeados recuerde que debemos utilizar @import para indicar el archivo donde se encuentra el mixin, y después si invocamos el mixin con @include:

En Sass este ejemplo se encuentra en el Repositorio del Post en excersices/uso_bordes.scss:

// le indicamos el nombre del archivo donde se encuentra
// nuestra declaración del mixin
@import "bordes";
header{
 // llamo el mixin especifico con @include
          @include rounded_border(#333, 4px);
}
#cajaTexto{
 // De nuevo lo utilizo con diferentes valores
         @include rounded_border(#400, 5px);
}
.banner{
 // De nuevo lo utilizo con diferentes valores
         @include rounded_border(#660, 7px);

}

Precompilando

sass --watch uso_bordes.scss:uso_bordes.css

Construyendo Documento HTML5  aplicando CSS con Sass

En el siguiente ejemplo vamos a crear un documento HTML5 con algunas etiquetas, la estructura de la carpeta va a ser la siguiente:

  • scss: Archivos fuente para los estilos escritos en Sass
  • css: Documentos pre-compilados por Sass
  • index.html: Documento escrito en HTML5 con algunas etiquetas para ver la aplicación de Sass

En el Repositorio del Post encuentras los documentos en la carpeta mock-up

El archivo index.html quedaria de la siguiente manera:

En el Repositorio del Post lo encuentras como mock-up/index.html

<!DOCTYPE HTML>
 <html lang="es-Es">
    <head>
          <meta charset="UTF-8">
          <title>ninjacode.tv</title>
          <link rel="stylesheet" href="css/ninjacodetv.css">
   </head>
<body>
<header>
      <h1>Sass en <em>ninjacode.tv</em></h1>
</header>
<nav>
          <a href="#">link 1</a>
          <a href="#">link 2</a>
          <a href="#">link 3</a>
          <a href="#">link 4</a>
          <a href="#">link 5</a>
</nav>
<section>
<article>
      <h1>Sass</h1>
      <p>
       Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people w       ho make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picke       d and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.</div>
</p>
</article>
<article>
      <h1>HTML5</h1>
      <p>
        Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glas        s motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, '        cause I'll kill the motherfucker, know what I'm sayin'?
</p>
</article>
</section>
          <footer><span>@html5facil</span> y <span>@ninjacodetv</span></footer>
</body>
</html>

Ahora si la parte interesante el Código en Sassprimero vamos con el archivo independiente que es de los bordes redondeados en CSS y crossbrowser:

En el Repositorio del Post lo encuentras como mock-up/scss/bordes.scss

// Declaramos el mixin con @mixin y siguiente a esto
// los atributos
@mixin border_rounder($width: 2px, $rounding: 4px){
       -moz-border-radius: $rounding $rounding;
       -webkit-border-radius: $rounding $rounding;
       -khtml-border-radius: $rounding $rounding;
       -o-border-radius: $rounding $rounding;
       border-radius: $rounding $rounding;
       border: $rounding $rounding;
       width: $width;
}

Por ultimo el archivo con los estilo del proyecto que realizamos en ninjacode.tv el día 15 de Agosto:

En el Repositorio del Post lo encuentras como mock-up/scss/ninjacodetv.scss


/* hola ninjacode.tv
 */
 @import "crose_browser";
 // Variable en sass
 $color_font:#4f4f4f;
 $paddin_value: 2px;
 $color_value: saturate(lighten(#333, 40%), 10%);
 body{
    background-color:$color_value;
    color: #f9f9f9;
    font-family: Arial;
    line-height: 1.5;
 }
 header{
    @include border_rounder(200px);
    background-color:#DBDBDB;
    h1{
      color: #333;
      padding: 2px $paddin_value * 2;
      em{
        color:#7a0909;
      }
   }
 }
 nav{
    a{
     color: #E5E5E5;
     text-decoration: none;
 }
     a:visited{
            color: #ccc;
     }
     a:active{
           color:#EAEAEA;
     }
     a:hover{
           color:#fff;
     }
 }
 section{
      article{
         @include border_rounder(520px);
         color: $color_font;
         background-color: #7f7f7f;
     h1{
        color: #e0a934;
        padding: $paddin_value $paddin_value /2;
        margin: $paddin_value $paddin_value - 2;
 }
    p{
      padding: $paddin_value * 4 $paddin_value + 4;
    }
   }
 }
 footer{
      @include border_rounder(500px);
      background-color: #DBDBDB;
      text-align: center;
      span{
         color: #333;
         margin: 10px 20px;
         padding: 10px $paddin_value;
     }
 }

Precompilando

sass --watch ninjacodetv.scss:ninjacodetv.css

Material grafico de apoyo para este Post

Anteriormente les habia comentado que el pasado 15 de Agosto fue el ninjacode donde hablamos y codeamos un rato SassA partir del minuto 47 del siguiente video encontraras este mismo ejercicio junto con algunas preguntas y respuestas del tema (pero si te lo perdiste te invito a que lo veas):

Imagen de previsualización de YouTube

Existen otras alternativas?

Claro que si existen más herramientas y algunas con mas o menos herramientas, yo me enfoco en Sass por su documentación, por la comunidad que esta detrás del desarrollo y por las aplicaciones a la ingenieria del software. Las otras opciones muy buenas son y que conozco:

  • Stylus: http://learnboost.github.com/stylus/
  • Less: http://lesscss.org/
comments powered by Disqus