Scribd
Cargar
130 vistas33 páginas

Sass

Este documento explica las características de Sass que extienden las funcionalidades de CSS para hacer el trabajo de diseño más productivo. Estas características incluyen reglas anidadas que permiten agrupar selectores CSS de forma concisa, la capacidad de referirse al selector padre con el símbolo "&", y propiedades anidadas que simplifican la escritura de propiedades relacionadas como fuentes.

Cargado por

Yake Kohen
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
130 vistas33 páginas

Sass

Este documento explica las características de Sass que extienden las funcionalidades de CSS para hacer el trabajo de diseño más productivo. Estas características incluyen reglas anidadas que permiten agrupar selectores CSS de forma concisa, la capacidad de referirse al selector padre con el símbolo "&", y propiedades anidadas que simplifican la escritura de propiedades relacionadas como fuentes.

Cargado por

Yake Kohen
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 33

Captulo 4.

Extensiones CSS
Este captulo explica las caractersticas que Sass aade a CSS para
hacer que tu trabajo como diseador/a sea ms productivo.

4.1. Reglas anidadas


Sass permite anidar las reglas CSS para que las hojas de estilos sean
ms concisas y fciles de escribir. A los selectores anidados se les
prefija automticamente todos los selectores de los niveles superiores.
Ejemplo:

#main p {

color: #00ff00;

width: 97%;

.redbox {

background-color: #ff0000;

color: #000000;

}
El cdigo Sass anterior se convierte automticamente en el siguiente
cdigo CSS:

#main p {

color: #00ff00;

width: 97%;

#main p .redbox {

background-color: #ff0000;
color: #000000;

}
Gracias a las reglas anidadas, se evita tener que repetir una y otra vez
los mismos selectores y se simplifica enormemente la creacin de
hojas de estilos complejas. Ejemplo:

#main {

width: 97%;

p, div {

font-size: 2em;

a { font-weight: bold; }

pre { font-size: 3em; }

}
El cdigo Sass anterior se transforma en el siguiente cdigo CSS:

#main {

width: 97%;

#main p, #main div {

font-size: 2em;

#main p a, #main div a {

font-weight: bold;
}

#main pre {

font-size: 3em;

4.2. Referenciando a los selectores padre


En ocasiones es necesario modificar el comportamiento por defecto de
los selectores anidados. Imagina que quieres aplicar estilos especiales
en el estadohover del selector o cuando el elemento <body> de la
pgina tiene una determinada clase.

En estos casos, puedes utilizar el carcter & para hacer referencia al


selector padre dentro del cual se encuentra la regla anidada. Ejemplo:

a {

font-weight: bold;

text-decoration: none;

&:hover { text-decoration: underline; }

body.firefox & { font-weight: normal; }

}
El cdigo Sass anterior se compila de la siguiente manera:

a {

font-weight: bold;

text-decoration: none;

a:hover {

text-decoration: underline;

}
body.firefox a {

font-weight: normal;

}
El carcter especial & siempre se reemplaza por el selector padre tal y
como aparece en el archivo CSS. Esto significa que si tiene una regla
anidada, primero se calcula el selector padre completo y despus se
reemplaza por &. Ejemplo:

#main {

color: black;

a {

font-weight: bold;

&:hover { color: red; }

}
El cdigo Sass anterior se compila de la siguiente manera:

#main {

color: black;

#main a {

font-weight: bold;

#main a:hover {

color: red;

}
El carcter & siempre debe aparecer al principio de los selectores
compuestos, pero s que puede ir seguido de un sufijo que se aplicar
al selector padre. Ejemplo:

#main {

color: black;

&-sidebar { border: 1px solid; }

}
El cdigo Sass anterior se compila de la siguiente manera:

#main {

color: black;

#main-sidebar {

border: 1px solid;

}
Si por cualquier circunstancia no se puede aplicar el sufijo al selector
padre, Sass mostrar un mensaje de error indicndote la causa.

4.3. Propiedades anidadas


CSS define varias propiedades cuyos nombres paracen estar
agrupados de forma lgica. As por ejemplo, las propiedades font-
family, font-size y font-weight estn todas relacionadas con el
grupo font. En CSS es obligatorio escribir el nombre completo de
todas estas propiedades. Sass permite utilizar el siguiente atajo para
definir las propiedades relacionadas:

.funky {

font: {

family: fantasy;
size: 30em;

weight: bold;

}
El cdigo Sass anterior se compila de la siguiente manera:

.funky {

font-family: fantasy;

font-size: 30em;

font-weight: bold;

}
Tambin es posible aplicar un valor al propio nombre que agrupa las
propiedades:

.funky {

font: 2px/3px {

family: fantasy;

size: 30em;

weight: bold;

}
El cdigo Sass anterior se compila de la siguiente manera:

.funky {

font: 2px/3px;

font-family: fantasy;
font-size: 30em;

font-weight: bold;

4.4. Selectores variables


Sass tambin soporta un tipo especial de selector variable que se
parece a los selectores de clase o de ID, pero que utiliza % en vez
de # o .. No obstante, estos selectores variables solamente deberan
usarse con la directiva @extend, tal y como se explica en los
siguientes captulos.

Si utilizas estos selectores sin la directiva @extend, el archivo CSS


generado ignorar todas esas reglas Sass.

Puesta a punto

Vamos a crear un archivo index.html, una carpeta que llamaremos


scss donde estarn todos los archivos .scss y una carpeta que
llamaremos css donde estarn los archivos css ya compilados.

El archivo index.html sera as (en los ejemplos que vayamos haciendo


iremos incluyendo nuevos elementos que podis ir aadiendo si
queris):

XHTML

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Proyecto Saas</title>
6 <link rel="stylesheet" href="css/main.css">
7 </head>
8 <body>
9 <nav id="nav" role="navigation">
10 <ul class="menu">
11 <li><a href="#" title="Inicio" >Inicio</a></li>
12 <li><a href="#" title="Quienes Somos">Quienes Somos</a></li>
13 <li><a href="#" title="Contacto">Contacto</a></li>
14 </ul>
15 </nav>
16
17 <div class="contenedor">
18 <h1>Proyecto Sass</h1>
19 <p>Este es nuestro primer proyecto con Sass</p>
20 </div>
21 </body>
22
23 </html>
Dentro de la carpeta scss creamos un archivo que se llame main.scss,
de momento vaco.

Voy a usar Codekit, pero podis usar si tenis Windows Prepos u otro
similar. Tambin podis realizar todo el pre-compilado desde el
Terminal.

Abrimos Codekit y seleccionamos Files/Add Project y aadimos la


carpeta donde tengamos este nuevo proyecto. Tendremos entonces:
Si hacemos click en Compile se crear el archivo style.css, de
momento vaco. De todas formas a medida que vayamos editando el
archivo (o archivos) scss no har falta dar al botn de Compilar, se
har automticamente y adems se refrescar el navegador cada vez
que grabemos, por lo que ni nos enteramos de lo que est pasando.

Vamos a ir ahora dando nuestros primeros pasos. Podis ir


aadindolos en el archivo scss de nuestro proyecto o en la
herramienta Try Sass que os coment anteriormente (o en alguna otra
similar)

Comentarios en Sass

Los comentarios que hagis en un archivo .scss con dos barras


inclinadas no aparecern en el CSS resultante. Esto tenedlo en cuenta
porque ser muy til para comentarios que no queris que aparezcan
en el CSS final.

Si escribimos en main.scss (o en Try Sass, si no habis creado an


vuestro proyecto):

CSS

1 // Este comentario no saldr


2 /* Este comentario s saldr*/
3 body {
4 font: {
5 family: Arial, sans-serif;
6 size: 100$;
7 weight: normal;
8 }
9}
En el archivo CSS final (main.css) tendris:

CSS
1 /* Este comentario s saldr*/
2 body {
3 font-family: Arial, sans-serif;
4 font-size: 100%;
5 font-weight: normal; }
Como veis el comentario con las dos barras inclinadas ha
desaparecido, mientras que el otro s aparece.

Importando en Sass

El uso de @import es diferente en Sass que en CSS. En una hoja de


estilos CSS supone una nueva llamada al servidor para cargar otra
hoja de estilos y esperar a que se cargue para aplicar los nuevos
estilos (razn por la cual se usa poco), por ejemplo supongamos que
tenemos dentro de nuestro css:

CSS

1 /*
2 * Importamos los estilos de menu.css
3 */
4 @import "menu.css";
En Sass es diferente. La importacin en un archivo .scss o .sass
se produce durante la compilacin. Adems no tenemos por qu
poner la extensin del archivo.

Vemoslo. Vamos a crear un nuevo archivo menu.scss que sea por


ejemplo as:

CSS

1 .menu {
2 margin: 0;
3 padding: 0;
4 list-style-type: none;
5}
6 .menu > li {
7 display: inline-block;
8 margin: 0 0 10px 10px;
9}
Y en main.css ponemos:

CSS

1 // Importamos los estilos de menu.scss


2 // cuando se compile main.scss
3 @import "menu";
Esto es lo que ocurre:
En el CSS resultante main.css estarn compilados tanto el contenido
de main.scss como el de menu.scss. Pero como vemos tambin se
crear una hoja de estilos independiente menu.css slo con los estilos
de menu.scss.

Para evitar esto debemos grabar el archivo menu.scss con un guin


inferior previo, es decir _menu.scss. Es lo que se llama un partial
(parcial).
La sintaxis dentro del archivo .scss sigue siendo la misma:

CSS

1 // Importamos los estilos de _menu.scss


2 // cuando se compile estilos.scss
3 @import "menu";
De esta forma los estilos de _menu.scss pasarn a formar parte una
vez compilado de main.css sin crear una hoja de estilos aparte. Por
regla general, un archivo como main.scss debera incluir nicamente
importaciones de diferentes archivos scss (por ejemplo, _reset.scss,
_menu.scss, _header.scss, etc..) sin tener estilos propios. Esto nos
permitir estructurar nuestro cdigo de forma modular.

Anidando Selectores
Esto es probablemente lo primero que empezars a hacer con Sass.
Supongamos que tenemos un cdigo CSS como este:

CSS

1 .contenido {
2 width: 300px;
3 background: #eaeaea;
4}
5 .contenido h2 {
6 font-size: 18px;
7}
8 .contenido p {
9 font-size: 14px;
En un archivo .scss podemos hacer:

CSS

1 .contenido {
2 width: 300px;
3 background: #eaeaea;
4
5 h2 {
6 font-size: 18px;
7 }
8
9 p{
10 font-size: 14px;
11 }
12 }
Esto nos permitir estructurar mucho mejor nuestro cdigo y
simplificarlo.

Anidando propiedades

Tambin podemos anidar propiedades, por ejemplo:

CSS

1 .boton {
2 text: {
3 decoration: none;
4 transform: uppercase;
5 }
6}
que se transformar en:

CSS

1 .boton {
2 text-decoration: none;
3 text-transform: uppercase;
4}

& El selector padre


Cuando estamos anidando el smbolo & se comporta igual que un
comodn, y se refiere siempre al selector padre. Por ejemplo:

CSS

1 .contenido {
2 border: 1px solid #999;
3 padding: 10px;
4
5 a{
6 text-decoration: underline;
7
8 &:hover {
9 color: green;
10 }
11 }
aqu & se refiere al elemento a. El resultado ser:

CSS

1 .contenido {
2 border: 1px solid #999;
3 padding: 10px;
4 }
5 .contenido a {
6 text-decoration: undeline;
7 }
8 .contenido a:hover {
9 color: green;
10 }
Tambin se pueden situar selectores antes del smbolo &:

CSS

1 .contenido {
2 width: 300px;
3
4 .esp & {
5 width: 400px;
6 }
7}
en este ejemplo, & equivale a .contenido. El resultado ser:

CSS

1 .contenido {
2 width: 300px;
3}
4 .esp .contenido {
5 width: 400px;
6}

El peligro de anidar selectores

Anidar selectores es una herramienta muy poderosa de Sass, pero


tambin muy peligrosa. Puedes acabar anidndolo todo:

CSS
1 .contenido {
2 background: #eaeaea;
3 .principal {
4 h2 {
5 a{
6 color: blue;
7 &:hover {
8 color: red;
9 }
10 }
11 }
12 }
13 }
obteniendo como resultado un archivo css como este:

CSS

1 .contenido {
2 background: #eaeaea;
3}
4 .contenido .principal h2 a {
5 color: blue;
6}
7 .contenido .principal h2 a:hover {
8 color: red;
9}
lo cual no supone seguir una prctica recomendable en CSS, adems
de introducir unos niveles de especificidad peligrosos para tu hoja de
estilos.
Por regla general intenta limitar el nivel de anidacin a 3 como mucho
(segn las circunstancias).

Para qu valen los Mixins?

Los Mixins te permiten reutilizar estilos (propiedades e incluso


selectores) sin tener que copiarlos y pegarlos cada vez que quieres
utilizarlos.

Por ejemplo, supongamos que tenemos un estilo bsico para los


botones de nuestra web pero tenemos luego dos colores diferentes
segn la ubicacin del botn:

CSS

1 /* style.css */
2 .btn-a {
3 background: blue;
4 color: white;
5 width: 30px;
6 border-radius: 10px;
7 }
8 .btn-b {
9 background: black;
10 color: white;
11 width: 30px;
12 border-radius: 10px;
13 }
Como vemos, todo se repite salvo el color de fondo. Este es un
ejemplo de repeticin de cdigo que probablemente queramos evitar
en nuestra hoja .scss, y lo podemos hacer gracias a los Mixins (en el
siguiente artculo veremos tambin otra opcin para hacerlo, Extend,
quizs incluso ms recomendada para el caso que acabamos de ver)

Cmo crear un Mixin

Para escribir un Mixin lo hacemos escribiendo @Mixin seguido por el


nombre del mismo. Por ejemplo, para el caso anterior, escribiramos
en el Mixin las propiedades que repetamos. Y luego en cada botn
incluimos el Mixin con@include:

CSS

1 /* style.scss */
2 @Mixin botones {
3 color: white;
4 width: 30px;
5 border-radius: 10px;
6 }
7 .btn-a {
8 @include botones;
9 background: blue;
10 }
11 .btn-b {
12 @include botones;
13 background: black;
14 }
Puntos a tener en cuenta:

Como regla general est bien escribir primero el @include y luego


poner las propiedades singulares (comobackground: black;) para
poder sobreescribir alguna de las que nos trae el Mixin si fuera
necesario.
Asegrate que el @Mixin est declarado antes de usar los @include.
Por ejemplo, puedes crear un parcial (partial) que se
llame _mixins.scss y lo importamos antes del resto de parciales
(puedes ver qu es un parcial en Sass: Comentarios, Importaciones y
Anidacin)
@include no es lo mismo que @import. Con @include incluimos un
mixin, mientras que con @import incluimos un archivo. En el mismo
artculo que el punto anterior vers el uso de @import.

El resultado en CSS sera el de arriba del todo, con el que iniciamos el


artculo.

CSS

1 /* style.css */
2 .btn-a {
3 background: blue;
4 color: white;
5 width: 30px;
6 border-radius: 10px;
7 }
8 .btn-b {
9 background: black;
10 color: white;
11 width: 30px;
12 border-radius: 10px;
13 }
Estaris de acuerdo conmigo que el CSS generado no es muy bueno.
Aunque en el archivo .scss no estbamos repitiendo cdigo, en el
archivo .css resultante s lo estamos haciendo. Sera mucho mejor
generar algo as:

CSS

1 /* style.css */
2 .btn-a, .btn-b {
3 background: blue;
4 color: white;
5 width: 30px;
6 border-radius: 10px;
7 }
8 .btn-b {
9 background: black;
10 }
Pero esto no lo podemos hacer con Mixins, sino con Extend, que
veremos en el siguiente artculo. Lo que acabamos de ver sin embargo
nos sirve apara ver cmo funcionan los Mixins y para qu no son
tiles.

Cundo usar los Mixins: Argumentos


El poder real de los Mixins est en que podemos pasar argumentos
a los mismos. Los argumentos se declaran como una lista de
variables dentro de un parntesis. A cada una de estas variables se le
asigna un valor cada vez que se usa el mixin. De esta manera no
generaremos cdigo repetido cada vez que lo usemos, ya que gracias
a los argumentos podemos obtener un cdigo singular para cada caso.

Por ejemplo, un Mixin sencillo para border-radius:

CSS

1 /* style.scss */
2
3 @mixin rounded($radio) {
4 border-radius: $radio;
5 -moz-border-radius: $radio;
6 -webkit-border-radius: $radio;
7 }
8
9 #footer { @include rounded(5px); }
10 #sidebar { @include rounded(8px); }
Como vemos hemos creado un Mixin llamado rounded que tiene como
argumento $radio, que es el radio que se aplicar en border-
radius. El CSS resultante ser:

CSS
1 /* style.css */
2
3 #footer {
4 border-radius: 5px;
5 -moz-border-radius: 5px;
6 -webkit-border-radius: 5px; }
7
8 #sidebar {
9 border-radius: 8px;
10 -moz-border-radius: 8px;
11 -webkit-border-radius: 8px; }
A los argumentos del mixin se les puede dar tambin un valor por
defecto, de tal manera que si al usar el Mixin no se pasa ese
argumento, se le asignar el valor por defecto.

Si queremos incluir un valor por defecto en el ejemplo anterior,


haramos:

CSS

1 /* style.scss */
2
3 @mixin rounded($radio: 10px)) {
4 border-radius: $radio;
5 -moz-border-radius: $radio;
6 -webkit-border-radius: $radio;
7 }
8
9 #navbar li { @include rounded; }
10 #footer { @include rounded(5px); }
11 #sidebar { @include rounded(8px); }
Y ahora tendramos para #navbar li:
CSS

1 /* style.css */
2
3 #navbar li {
4 border-radius: 10px;
5 -moz-border-radius: 10px;
6 -webkit-border-radius: 10px; }
El uso de Mixins es tan potente que encontraris libreras, pginas
web y artculos de blogs dedicados exclusivamente a compartir Mixins.
Ejemplos (podis encontrar ms implemente buscando en Google):

Bourbon.io
Handy Sass Mixins
Sass Mixins

Mltiples argumentos

Tal y como dijimos anteriormente, podemos pasar al mixin una lista de


argumentos separados por comas:

CSS

1 /* style.scss */
2 @mixin botones($radio, $color) {
3 border-radius: $radio;
4 color: $color;
5}
6
7 .btn-a
8 @include botones(10px, #000);
que nos dar como resultado:

CSS

1 /* style.css */
2 .btn-a {
3 border-radius: 10px;
4 color: #000;
5}
Los argumentos hay que pasarlos en el @include en el mismo orden
en el que estn definidos en el Mixin. Si nos falta alguno obtendremos
un mensaje de error, a no ser que definamos alguno por defecto:

CSS

1 /* style.scss */
2 @mixin botones($radio, $color:#000 )
3 border-radius: $radio;
4 color: $color;
5}
6 .btn-a {
7 @include botones(10px);
8}
Debemos tener cuidado a la hora de crear la lista de argumentos, ya
que los argumentos por defecto deben ir siempre al final de la
cadena. Es decir, esto nos dar un error:

CSS

1 /* style.scss */
2 @mixin botones($color:#000, $radio)
3 border-radius: $radio;
4 color: $color;
5}
Si son muchos los argumentos que pasamos en nuestro Mixin nos
ayudar utilizar en el @include los nombres de las variables. De
esta manera podemos pasar los argumentos en el orden que
queramos y adems no nos equivocaremos a la hora de asignar los
valores:

CSS

1 /* style.scss */
2 @mixin botones($radio, $color:#000 )
3 border-radius: $radio;
4 color: $color;
5}
6 .btn-a {
7 @include botones($color: #333, $radio: 10px);
8}
Argumentos variables

Hay ocasiones en los que pasar mltiples argumentos puede


complicarse un poco ya que a veces nos encontramos ya comas en el
propio CSS, como por ejemplo:

CSS

1 /* style.css */
2 .btn-a {
3 -webkit-transition: color 0.2s ease-in, background 0.5s ease-out;
4 -moz-transition: color 0.2s ease-in, background 0.5s ease-out;
5 transition: color 0.2s ease-in, background 0.5s ease-out;
6}
Si intentamos pasar este valor con comas como argumento:

CSS

1 /* style.scss */
2 @mixin transition($val) {
3 -webkit-transition: $val;
4 -moz-transition: $val;
5 transition: $val;
6}
7 .btn-a {
8 @include transition(color 0.3s ease-in, background 0.5s ease-out);
9}
Obtendremos el error:
Mixin transition takes 1 argument but 2 were passed (Mixin transition
necesita 1 argumento pero se han pasado 2)

Al tener el valor una coma interpreta como otro argumento el


contenido existente a partir de la misma. Esto lo solucionamos
aadiendo tres puntos ... al final de la definicin del argumento.
Entonces crearemos lo que se llama un argumento variable (vararg),
que nos permitir pasar como argumento nico un valor con comas.

CSS

1 @mixin transition($val...) {
2 /* style.scss */
3 -webkit-transition: $val;
4 -moz-transition: $val;
5 transition: $val;
6 }
7
8 .btn-a {
9 @include transition(color 0.2s ease-in, background 0.5s ease-out);
10 }
Entonces el resultado ser ahora correcto:

CSS

1 /* style.css */
2 .btn-a {
3 -webkit-transition: color 0.2s ease-in, background 0.5s ease-out;
4 -moz-transition: color 0.2s ease-in, background 0.5s ease-out;
5 transition: color 0.2s ease-in, background 0.5s ease-out;
6}
Tambin podemos utilizar los Argumentos Variables en el include,
de tal manera que pasamos todos los valores separados por comas en
una sola variable. Por ejemplo si utilizamos un ejemplo anterior:

CSS

1 /* style.scss */
2 @mixin botones($radio, $color:#000 )
3 border-radius: $radio;
4 color: $color;
5 }
6
7 $propiedades = 10px, #333, ;
8
9 .btn-a {
10 @include botones($propiedades...);
11 }
Como veis pasamos en un argumento variable una lista de valores
separados por comas que es dividida por el Mixin. Hay que tener
cuidado con el orden de los valores.

Interpolacin y Mixins
Cuando hablbamos de variables en Sass nos referamos a la
interpolacin. Recordemos que podemos utilizar #{$variable} para
introducir variables en selectores, nombres de propiedades y cadenas
de texto. Esto nos permitir crear un cdigo ms eficiente en nuestros
mixins. Por ejemplo (este ejemplo es de la propia web de Sass), si
hacemos un mixin para border radius que permita redondear varias
esquinas segn el caso, tendramos que escribir un mixin para cada
combinacin de esquinas. Gracias a la interpolacin lo podemos hacer
con un slo mixin:

Sass

1 /* style.scss */
2
3 @mixin rounded($vert, $horz, $radius: 10px) {
4 border-#{$vert}-#{$horz}-radius: $radius;
5 -moz-border-radius-#{$vert}#{$horz}: $radius;
6 -webkit-border-#{$vert}-#{$horz}-radius: $radius;
7 }
8
9 #navbar li { @include rounded(top, left); }
10 #footer { @include rounded(top, left, 5px); }
11 #sidebar { @include rounded(top, left, 8px); }
y obtendremos:

CSS
1 /* style.css */
2
3 #navbar li {
4 border-top-left-radius: 10px;
5 -moz-border-radius-topleft: 10px;
6 -webkit-border-top-left-radius: 10px; }
7
8 #footer {
9 border-top-left-radius: 5px;
10 -moz-border-radius-topleft: 5px;
11 -webkit-border-top-left-radius: 5px; }
12
13 #sidebar {
14 border-top-left-radius: 8px;
15 -moz-border-radius-topleft: 8px;
16 -webkit-border-top-left-radius: 8px; }
Bueno, eso es todo. En el prximo artculo veremos @extend, ms
recomendable que mixins para ciertas ocasiones (como en el caso del
ejemplo con el que empezamos este artculo).

También podría gustarte