Sass
Sass (Syntactically Awesome Stylesheets) es un lenguaje de hoja de estilos en cascada inicialmente diseñado por Hampton Catlin y desarrollado por Natalie Weizenbaum.[1][2] Después 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 | ||
---|---|---|
![]() | ||
Desarrollador(es) | ||
Hampton Catlin https://sass-lang.com/ | ||
Información general | ||
Apareció en | 28 de noviembre de 2006 | |
Diseñado por | Hampton Catlin | |
Influido por | CSS | |
Licencia | Licencia MIT | |
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 con sangrado») que usa una sintaxis similar al Haml.[3] Este usa la sangría 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 programación 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 guardado.[4] Sass es simplemente azúcar sintáctica para escribir CSS.
La implementación oficial de Sass es open-source y está 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
editarSass 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)
editarCSS 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
editarCSS 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
editarLos 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
editar@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
editarMientras 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 referencia 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
editarIDE | Software | website |
---|---|---|
Microsoft Visual Studio | Mindscape |
http://www.mindscapehq.com/products/web-workbench |
Eclipse | ||
JetBrains RubyMine | ||
NetBeans |
http://plugins.netbeans.org/plugin/34929/scss-support Archivado el 8 de octubre de 2015 en Wayback Machine. |
Mixins y frameworks
editarExisten varios grupos de mixins o llamados frameworks que basados en Sass hacen más rápido el crear o aplicar estilos reduciendo la sintaxis.
Frameworks responsivos
editarEstos frameworks usan Sass como base y su función básica es resolver el acomodo de diferentes tamaños de pantalla para lograr un diseño responsivo del sitio web.
Referencias
editar- ↑ «W3 Consortium Sass Tutorial». W3Schools.
- ↑ «Natalie Weizenbaum's Github Profile». Consultado el 25 de marzo de 2020.
- ↑ a b c d e f g Sass - Syntactically Awesome Stylesheets
- ↑ Sass - Syntactically Awesome Stylesheets Archivado el 9 de octubre de 2013 en Wayback Machine. Tutorial
- ↑ http://drupal.org/project/sass
- ↑ a b c d e Sass (Syntactically Awesome StyleSheets) SASS_REFERENCE
- ↑ Module: Sass::Script::Functions Sass Functions