Sass
Sass (Syntactically Awesome Stylesheets) es un lenguaje de hoja de estilos inicialmente diseñado por Hampton Catlin y desarrollado por Nathan Weizenbaum.[1][2]Despues de sus versiones iniciales, Nathan Weizenbaum y Chris Eppstein han continuado extendiendo Sass con SassScript, un lenguaje de script simple, usado en los ficheros Sass.
Sass es un metalenguaje de Hojas de Estilo en Cascada (CSS). Es un lenguaje de script que es traducido a CSS. SassScript es el lenguaje de script en sí mismo. Sass consiste en dos sintaxis. La sintaxis original, llamada indented syntax («sintaxis indentada») que usa una sintaxis similar al Haml.[3] Este usa la indentación para separar bloques de código y el carácter nueva línea para separar reglas. La sintaxis más reciente, SCSS, usa el formato de bloques como CSS. Este usa llaves para denotar bloques de código y punto y coma (;) para separar las líneas dentro de un bloque. La sintaxis indentada y los ficheros SCSS tienen las extensiones .sass y .scss respectivamente.
CSS3 consiste en una serie de selectores y pseudo-selectores que agrupan las reglas que son aplicadas. Sass (en el amplio contexto de ambas sintaxis) extiende CSS proveyendo de varios mecanismos que están presentes en los lenguajes de programacion tradicionales, particularmente lenguajes orientados a objetos, pero este no está disponible para CSS3 como tal. Cuando SassScript se interpreta, este crea bloques de reglas CSS para varios selectores que están definidos en el fichero SASS. El intérprete de SASS traduce SassScript en CSS. Alternativamente, Sass puede monitorear los ficheros .sass o .scss y convertirlos en un fichero .css de salida cada vez que el fichero .sass o .scss es salvado.[4] Sass es simplemente azúcar sintáctica para escribir CSS.
La implementación oficial de Sass es open-source y escrita en Ruby, sin embargo existen otras implementaciones, incluyendo una en PHP para Drupal.[5] La sintaxis indentada es un metalenguaje. SCSS es un metalenguaje anidado, lo que es válido en CSS es válido en SCSS con la misma semántica. Sass soporta la integración con la extensión de Firefox Firebug.[6]
SassScript proporciona los mecanismos siguientes: variables, nesting (anidamiento), mixins, y herencia.[3] de los selectores.
Variables
Sass permite la definición de variables. Las variables comienzan con el signo de dólar ($). La asignación de variables se hace con los dos puntos (:).[6]
SassScript permite 4 tipos de datos:[6]
- Números (incluyendo las unidades)
- Strings (con comillas o sin ellas)
- Colores (código, o nombre)
- Booleanos
Las variables pueden ser resultados o argumentos de varias funciones.[7] disponibles. Durante el proceso de traducción, los valores de las variables son insertados en el documento CSS de salida.[3]
En el estilo SCSS
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
O el estilo SASS
$blue: #3bbfce $margin: 16px .content-navigation border-color: $blue color: darken($blue, 9%) .border padding: $margin/2 margin: $margin/2 border-color: $blue
Debe compilar a:
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
Nesting (Anidamiento)
CSS soporta anidamiento lógico, pero los bloques de código no son anidados. Sass permite que el código anidado sea insertado dentro de cualquier otro bloque.[3]
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}
Debe compilar a:
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.2em;
}
Otros tipos de anidado más complejos incluyendo namespace anidamiento y referencias al padre son discutidos en la documentación de Sass.[6]
Mixins
CSS no soporta mixins. Cualquier código duplicado debe ser repetido en cada lugar. Un mixin es una sección de código que contiene código Sass. Cada vez que se llama un mixin en el proceso de conversión el contenido del mismo es insertado en el lugar de la llamada. Los mixin permiten una solución limpia a las repeticiones de código, así como una forma fácil de alterar el mismo.[3]
@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {padding: 2px}
}
#data {
@include table-base;
}
Debe compilar a:
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}
Argumentos
Los mixins también soportan argumentos.[3]
@mixin left($dist) {
float: left;
margin-left: $dist;
}
#data {
@include left(10px);
}
Debe compilar a:
#data {
float: left;
margin-left: 10px;
}
En combinación
@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {padding: 2px}
}
@mixin left($dist) {
float: left;
margin-left: $dist;
}
#data {
@include left(10px);
@include table-base;
}
Debe compilar a:
#data {
float: left;
margin-left: 10px;
}
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}
Herencia de selectores
Mientras CSS3 soporta la jerarquía Document Object Model (DOM), este no permite la herencia de selectores. La herencia se logra insertando una línea dentro de un bloque de código que use la palabra clave @extend y haga referncia a otro selector. Los atributos del selector extendido serán aplicados al selector que hace la llamada.[3]
.error {
border: 1px #f00;
background: #fdd;
}
.error.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
@extend .error;
border-width: 3px;
}
Debe compilar a:
.error, .badError {
border: 1px #f00;
background: #fdd;
}
.error.intrusion,
.badError.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
border-width: 3px;
}
Sass soporta multiple inheritance (herencia multiple).[6]
Integración con los IDEs
| IDE | Software | website |
|---|---|---|
| Microsoft Visual Studio | Mindscape | |
| Eclipse | ||
| JetBrains RubyMine | ||
| NetBeans |
Referencias
- ↑ Syntactically Awesome Stylesheets About
- ↑ «Nathan Weizenbaum's blog».
- ↑ a b c d e f g [http://sass-lang.com/ Sass - Syntactically Awesome Stylesheets]
- ↑ [http://sass-lang.com/tutorial.html Sass - Syntactically Awesome Stylesheets] Tutorial
- ↑ http://drupal.org/project/sass
- ↑ a b c d e [http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html Sass (Syntactically Awesome StyleSheets)] SASS_REFERENCE
- ↑ [http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html Module: Sass::Script::Functions] Sass Functions