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!
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.
Por Mariux el 10 de Octubre de 2013
Por smailyn el 11 de Octubre de 2013
Por aukun el 15 de Octubre de 2013
function browser(){var agent=navigator.userAgent;var nav='d';nav=(agent.indexOf('Firefox')>0?'ff':'')||(agent.indexOf('Safari')>0?'sa':'')||(agent.indexOf('Chrome')>0?'ch':'')||(agent.indexOf('IE')>0?'IE':'')||(agent.indexOf('pera')>0?'op':'');return nav;}
Por Fito el 26 de Noviembre de 2013
Por mth el 09 de Octubre de 2014
necesito igual como instalar el bendito ruby en windows!!!! no me entra en la cabeza
Por niCooD el 01 de Diciembre de 2014