Wikipedia

Sass

lenguaje de hojas de estilo

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
[editar datos en Wikidata]

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

editar

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]​

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)

editar

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

editar

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

editar

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

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

editar

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 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

editar
IDE 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

editar

Existen varios grupos de mixins o llamados frameworks que basados en Sass hacen más rápido el crear o aplicar estilos reduciendo la sintaxis.

  1. Compass
  2. Bourbon

Frameworks responsivos

editar

Estos 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.

  1. Susy
  2. Singularity
  3. Bootstrap (a partir de la versión 4)

Referencias

editar
  1. ↑ «W3 Consortium Sass Tutorial». W3Schools. 
  2. ↑ «Natalie Weizenbaum's Github Profile». Consultado el 25 de marzo de 2020. 
  3. ↑ a b c d e f g Sass - Syntactically Awesome Stylesheets
  4. ↑ Sass - Syntactically Awesome Stylesheets Archivado el 9 de octubre de 2013 en Wayback Machine. Tutorial
  5. ↑ http://drupal.org/project/sass
  6. ↑ a b c d e Sass (Syntactically Awesome StyleSheets) SASS_REFERENCE
  7. ↑ Module: Sass::Script::Functions Sass Functions

Enlaces externos

editar
Obtenido de «https://es.wikipedia.org/w/index.php?title=Sass&oldid=156039154»