Sass, introducción a un mundo mejor
Desde cursoderails nos hemos comprometido con nuestros alumnos a mostrarle el camino para convertirse en desarrolladores web expertos, con las tecnologías y herramientas que utilizan las empresas y desarrolladores web expertos. Por ello tenemos que dar la bienvenida a un nuevo curso de Sass y Haml, se compone de 27 vídeo-clases donde el alumno va a descubrir todas las opciones y herramientas que disponemos para «programar» nuestras hojas de estilo, si si….programar, ya que esto es Sass, nos posibilita llevar los conceptos de programación a nuestros CSS, en esencia eso es Sass (Syntactically Awesome Style Sheets) Hojas de estilos impresionantes. Para una mayor definición podemos dirigirnos a la Wikipedia o a su página oficial o continuar leyendo y obviar aspectos que por ahora no son necesarios para el aprendizaje de Sass.
Como grandes apasionados del mundo Ruby tenemos que decir que ha sido una fuente de inspiración para la realización la sintaxis SASS.
¿Qué es Sass (Syntactically Awesome StyleSheets)?
Es un preprocesador de hojas de estilos CSS, es una nueva forma de escribir nuestras CSS introduciendo en ella conceptos de la programación, como variables, funciones, iteradores, bucles, condicionales, y otros conceptos pertenecientes a las hojas de estilos que Sass mejora cosiderablemente, intentando alcanzar la filosofía Rails como:
- No te repitas
- Tener nuestros proyectos mejor organizados con parciales
- Ahorrar peticiones con técnicas como Sprite, la cúal podemos realizar de forma rápida y sencilla
- Reutilización de código, entre otros
¿ Cómo trabaja Sass?
A la hora de componer nuestras hojas de estilo Sass, realiza el siguiente proceso que muestro en la imagen.
Como puedes ver, nuestro primer paso es crear nuestras hojas de estilos en sass, aunque a la hora de compilar en nuestro navegador no veremos para nada código sass, veras las hojas css estáticas, aunque hemos conseguido mayor dinamismo incorporando Sass a nuestros proyectos web.
Ventajas de Sass
Las hojas de estilos van creciendo y se vuelven cada vez más insostenibles de mantener, si no fuera por herramientas como FireBug, sería una auténtica tortura poder mantener los css de un proyecto web.
Con este curso de Sass podrás dominar las técnicas y herramientas que nos brinda para tener nuestras hojas de estilos mucho mejor ordenado, con un código muy limpio y una mejor estructura de hoja, ni que decir tiene que con mucho menos código, gracias a las técnicas de programación. Esto hace , al igual que pasa con Ruby on Rails, que adoptemos buenas prácticas a la hora de programar lo que te convierte en mejor programador.
Sass con ejemplos
ul{ margin: 0; padding: 0; list-style: none; li { display: inline-block; } a{ color: blue; &:hover{ color: white; } }
Este primer ejemplo descubre el anidamiento de Sass o en inglés nesting Sass. Bueno solo es el comienzo de todo el potencial que nos brinda Sass respecto a las hojas de estilo. Allá va otro ejemplo, donde vas a ver los mixins una especie de funciones dentro de Sass.
$pantalla-small: 320px; $pantalla-large: 1024px; @mixin fondo-pantalla($media) { @if $media == medio { @media only screen and (min-width: $pantalla-small + 1) and (max-width: $pantalla-large - 1) { @content; } } @else if $media == largo { @media only screen and ( min-width: $pantalla-large) { @content; } } }
Lo que observamos en el ejemplo es el código necesario para incorporar a nuestras etiquetas «divs», u otra la propiedad que deseamos tener dependiendo del tamaño de la pantalla en la cual estamos visualizando nuestras hoja, para ello faltaría completarlo con el siguiente código.
.content{ @include fondo-pantalla(medio) { background: yellow; } @include fondo-pantalla(largo) { background: green; } }
Así la clase .content tendrá diferente color de fondo cuando se establezcan los tamaños de las medias querys
Como resultado de la composición de nuestras hojas de estilo la podemos identificar con dos tipos de extensiones sass o scss, ¿dos extensiones? Sí! Y que diferencia hay entre ellas. Eso lo dejamos para el siguiente punto no sea impaciente. Ahora toca ver un ejemplo de un archivo Sass.
SCSS VS SASS
Podemos optar por un cambio más radical de nuestras hojas de estilos o un cambio más moderado. Actualmente la mayoría de desarrolladores web se encuentra en el estado de un cambio menos radical osea scss.
¿Qué diferencia existe?, Pues si empleamos la extensión .scss deberemos emplear las llaves y los punto y comas al finalizar cada instrucción, tal y como estamos aconstumbrados en CSS. Si por el contrario empleamos la extensión .sass, tendremos que obviar las llaves basándonos en la tabulación como con HAML, que también emplea este método para ordenar nuestro código.
#Extensión Scss ul{ margin: 0; padding: 0; list-style: none; li { display: inline-block; } a{ color: blue; &:hover{ color: white; } } #Extensión Sass ul margin: 0 padding: 0 list-style: none li display: inline-block a color: blue &:hover color: white
Instalar SASS en Ruby on Rails
Como nos centramos sobretodo en aplicaciones Ruby on Rails, tenemos una excelente noticia, Sass ya viene incorporado en nuestro Gemfile a partir de la versión 3.2, por lo que podemos empezar a utilizarlo al crear un proyecto rails. Sí por el contrario queremos probar Sass y no deseamos utilizar Ruby on Rails ( yo no lo entendería 🙂 ), desde la página oficial encontramos con que facilidad podemos hacerlo, te dan a elegir entre una aplicación GUI o desde la línea de comando instalando Ruby, Página oficial.
#gemfile gem 'sass-rails'
Sí tu caso es que tienes Ruby on Rails y estás empleando una versión anterior a la 3.2, puedes realizar la instalación introduciendo la gema en el gemfile, para luego ejecutar desde el terminal el bundle install para terminar con sus dependiencia e instalación de la integración de sass y ruby on rails.
Vamos a conocer algunos de los elementos que podemos encontrar en Sass, para que te hagas una idea sobre lo que estamos hablando.
Sass variables
La sintaxis de las variables se identifican por el uso del operador $ anteponiendo al nombre de la variable, esta la continuaremos con los dos punto para asingar el valor que podemos almacenar, hexadecimal, números, pixeles, cadena de caracteres, booleanos, listas, mapas
Cuando compilamos esta variable no esta visible, para las hojas “estáticas” css del navegador, tenerlo en cuenta no veremos nada de lo que hemos implementado en sass.
$pantalla-small: 320px; $pantalla-large: 1024px;
Valores hexadecimales en variables sass
$fondo-pantalla: #f3f3f3;
Valores Númericos en variables sass
$numero: 200;
Valores Píxeles en variables sass
$contenedor: 900px;
Valores Cadena de caracteres en variables sass
$fuente: "Arial, Times New Roman"
En Sass existe lo que se conoce como interpolación de cadenas, que también podemos encontrar en Ruby y otros lenguajes de programación. Consiste en mostrar variables dentro de una cadena de caracteres.
$fuente-secundaria: "Times New Roman" $fuente-principal: "Arial, #{$fuente-secundaria}"
Valores Booleanos en variables sass
$boleano: true
Valores Listas en variables sass
Lo podemos asemejar a los Array de los lenguaje de programación, además si no tenemos caracteres especiales podemos obviar las comillas, aunque no es un elemento que estorbe según mi opinión.
$lista: 'uno','dos', 'tres'
También podemos tener que cada elemento de la lista conforme a su vez otra lista, como pasa en los array tradicionales.
$lista-uno:'uno-uno','uno-dos' $lista: $lista-uno,'dos', 'tres'
Pero un dato importante es que el índice de las listas de Sass comienza en 1 y no en 0 como suele ser en los lenguajes de programación.
Funciones de listas en Sass
- nth($lista, $indice) – Devuelve el elemento de la lista $lista en la posición que le indiquemos con la variable $indice (comienza en el uno).
- length($lista) – Devuelve el número de elementos de la lista.
- append($lista, $valor) – Añadimos un elemento a la lista $lista con el valor indicado en $valor.
Existen más funciones de las listas en Sass, pero se puede decir que estos tres son los más importantes. Por supuesto podemos recorrer nuestra lista con iteradores de Sass.
@each $elemento in $lista { #Nuestro código }
Valores Mapas en variables sass
Los mapas en Sass podemos asemejarlos a los Hash de Ruby, donde se componen de llave y valores.
$mapa: (clave1: valor1, clave2: valor2, clave3: valor3);
A continuación adjuntamos un ejemplo de como podemos emplear los mapas en Sass.
$botones:(trabajo: #F78181, personal:#BFFF00, amigos: #00FFFF, otros: #DF01D7); @each $nombre, $valor in $botones{ .boton-#{$nombre}{ background-color: $valor; &:hover{background-color: #F7BE81; } } } #Resultado en Css .boton-trabajo { background-color: #F78181; } .boton-trabajo:hover { background-color: #F7BE81; } .boton-personal { background-color: #BFFF00; } .boton-personal:hover { background-color: #F7BE81; } .boton-amigos { background-color: #00FFFF; } .boton-amigos:hover { background-color: #F7BE81; } .boton-otros { background-color: #DF01D7; } .boton-otros:hover { background-color: #F7BE81; }
Como vemos tenemos seis tipos de datos más o menos que nos permiten almacenar en las variables de Sass. Tenemos diposible una consola interactiva, ¿te suena?, sí igual que con Ruby, disponemos de un interprete para ejecutar código Sass y ver los resultados de una manera inmediata. Tendremos que abir nuestra consola o terminal y ejecutar el comando sass -i
Valores por defecto variables Sass !default
Con el comando !default, podemos asignar un valor por defecto a una variable, este siempre se mantendrá en «vigor» hasta que asignemos otro valor a la variable, antes o después de introducir el comando !default,¿cómo que antes o después?, si veamos el ejemplo
#Valor por defecto, como resultado $variable tendrá el valor 'Hola mundo' $variable: 'valor' !default; $variable: 'Hola mundo'; #Valor por defecto, como resultado $variable tendrá el valor 'Hola mundo', porque 'valor' solo es mostrado si no tenemos valores asignados. $variable: 'Hola mundo'; $variable: 'valor' !default;
Variables globales y locales
Bueno como en todo lenguaje de programación tenemos variables que son accesibles o no, dependiendo donde esten declaradas o realicemos la asignación, si la realizamos en una función, mixin por ejemplo pertenecerá a un ámbito local, si por el contrario la hemos declarado fuera de ello se considerará global por la que estará disponible para todos los elementos de nuestra hoja de estilo sass
Espero que te haya servido de una buena introducción y hacerte una gran idea de lo que significa adentrarnos en Sass, Compass, Susy con anidación de sass(nesting), anidación de propiedades, grupos, tipos de comentarios, funciones predeterminadas, funciones personalizadas, mixins, PlaceHolder, Herencia, Grid con Susy, el framework Compass, condicionales, iteradores, bucles, implementar Sprite con Compass, ejercicios, examenes, proyectos… y un tutor que te ayudará a captar los conceptos de Sass, te apuntas? Te dejo un vídeo ejemplo para que veas una de las clases del curso.