Este capítulo explica las características que Sass añade a CSS para hacer que tu trabajo como diseñador/a sea más productivo.
4.1. Reglas anidadas
Sass permite anidar las reglas CSS para que las hojas de estilos sean más concisas y fáciles de escribir. A los selectores anidados se les prefija automáticamente todos los selectores de los niveles superiores. Ejemplo:
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}El código Sass anterior se convierte automáticamente en el siguiente código 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 creación de hojas de estilos complejas. Ejemplo:
#main {
width: 97%;
p, div {
font-size: 2em;
a { font-weight: bold; }
}
pre { font-size: 3em; }
}El código Sass anterior se transforma en el siguiente código 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 estado hover del selector o cuando el elemento <body> de la página tiene una determinada clase.
En estos casos, puedes utilizar el carácter & 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 código 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 carácter 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 después se reemplaza por &. Ejemplo:
#main {
color: black;
a {
font-weight: bold;
&:hover { color: red; }
}
}El código Sass anterior se compila de la siguiente manera:
#main {
color: black;
}
#main a {
font-weight: bold;
}
#main a:hover {
color: red;
}El carácter & 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 código 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 indicándote la causa.
4.3. Propiedades anidadas
CSS define varias propiedades cuyos nombres paracen estar agrupados de forma lógica. Así por ejemplo, las propiedades font-family, font-size y font-weight están 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 código Sass anterior se compila de la siguiente manera:
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}También es posible aplicar un valor al propio nombre que agrupa las propiedades:
.funky {
font: 2px/3px {
family: fantasy;
size: 30em;
weight: bold;
}
}El código 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 también 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 deberían usarse con la directiva @extend, tal y como se explica en los siguientes capítulos.
Si utilizas estos selectores sin la directiva @extend, el archivo CSS generado ignorará todas esas reglas Sass.