stringtranslate.com

Sass (lenguaje de hojas de estilo)

Sass (abreviatura de syntactically awesome style sheets ) es un lenguaje de programación de preprocesadores que se interpreta o compila en hojas de estilo en cascada (CSS). SassScript es el lenguaje de programación en sí.

Sass consta de dos sintaxis . La sintaxis original, llamada "sintaxis sangrada", utiliza una sintaxis similar a Haml . [2] [3] Utiliza sangría para separar bloques de código y caracteres de nueva línea para separar reglas. La sintaxis más nueva, SCSS (Sassy CSS), utiliza formato de bloque como el de CSS. Utiliza llaves para indicar bloques de código y punto y coma para separar reglas dentro de un bloque. La sintaxis sangrada y los archivos SCSS reciben tradicionalmente las extensiones .sass y .scss, respectivamente. [4]

CSS3 consta de una serie de selectores y pseudoselectores que agrupan las reglas que se les aplican. Sass (en el contexto más amplio de ambas sintaxis) extiende CSS al proporcionar varios mecanismos disponibles en lenguajes de programación más tradicionales , particularmente lenguajes orientados a objetos , pero que no están disponibles para CSS3 en sí. Cuando se interpreta SassScript, crea bloques de reglas CSS para varios selectores según lo definido por el archivo Sass. El intérprete de Sass traduce SassScript a CSS. Alternativamente, Sass puede monitorear el archivo .sass o .scss y traducirlo a un archivo .css de salida siempre que se guarde el archivo .sass o .scss. [5]

La sintaxis sangrada es un metalenguaje. SCSS es un metalenguaje anidado y un superconjunto de CSS, ya que un CSS válido es un SCSS válido con la misma semántica .

SassScript proporciona los siguientes mecanismos: variables , anidamiento , mixins , [3] y herencia de selectores . [2]

Historia

Sass fue diseñado inicialmente por Hampton Catlin y desarrollado por Natalie Weizenbaum. [6] [7]

Implementaciones principales

SassScript se implementó en varios idiomas, las implementaciones más destacadas son:

Características

Variables

Sass permite definir variables. Las variables comienzan con un signo de dólar ( $). La asignación de variables se realiza con dos puntos ( :). [18]

SassScript admite cuatro tipos de datos: [18]

Las variables pueden ser argumentos o resultados de una de varias funciones disponibles . [19] Durante la traducción, los valores de las variables se insertan en el documento CSS de salida. [2]

Anidación

CSS admite la anidación lógica, pero los bloques de código en sí no están anidados. Sass permite que el código anidado se inserte dentro de otro. [2]

En la documentación de Sass se analizan tipos de anidación más complicados, incluida la anidación de espacios de nombres y las referencias a padres. [18]

Bucles

Sass permite iterar sobre variables usando @for, @eachy @while, que pueden usarse para aplicar diferentes estilos a elementos con clases o identificadores similares.

Argumentos

Los mixins también admiten argumentos . [2]

En combinación

Herencia del selector

Si bien CSS3 admite la jerarquía del Modelo de objetos de documento (DOM), no permite la herencia de selectores. En Sass, la herencia se logra insertando una línea dentro de un bloque de código que utiliza la palabra clave @extend y hace referencia a otro selector. Los atributos del selector extendido se aplican al selector que realiza la llamada. [2]

Sass admite herencia múltiple . [18]

libSass

En la Conferencia de desarrolladores HTML5 de 2012, Hampton Catlin, el creador de Sass, anunció la versión 1.0 de libSass, una implementación C++ de código abierto de Sass desarrollada por Catlin, Aaron Leung y el equipo de ingeniería de Moovweb . [20] [21]

Según Catlin, libSass se puede "colocar en cualquier cosa y tendrá Sass en ella... Podrías colocarla directamente en Firefox hoy mismo y compilar Firefox y se compilaría allí. Escribimos nuestro propio analizador desde cero para asegurarnos de que fuera posible". [22]

Los objetivos de diseño de libSass son:

Integración IDE

Véase también

Referencias

  1. ^ ab "Dart Sass - última versión". github.com .
  2. ^ abcdef Media Mark (3.2.12). "Sass - Hojas de estilo sintácticamente asombrosas". Sass-lang.com . Consultado el 23 de febrero de 2014 .{{cite web}}: CS1 maint: numeric names: authors list (link)
  3. ^ ab Firtman, Maximiliano (15 de marzo de 2013). Programación de la Web móvil. O'Reilly Media, Inc. ISBN 978-1-4493-3497-0.
  4. ^ Libby, Alex (2019). Presentación de Dart Sass: una introducción práctica al sustituto de Sass, creado sobre Dart. Berkeley, CA: Apress. doi :10.1007/978-1-4842-4372-5. ISBN 978-1-4842-4371-8.
  5. ^ Sass - Tutorial de hojas de estilo sintácticamente asombrosas
  6. ^ "Sass: hojas de estilo sintácticamente asombrosas". sass-lang.com . Archivado desde el original el 1 de septiembre de 2013.
  7. ^ "Blog de Natalie Weizenbaum". Archivado desde el original el 11 de octubre de 2007.
  8. ^ abc "Sass / Scss". Drupal.org. 21 de octubre de 2009. Consultado el 23 de febrero de 2014 .
  9. ^ "descaro". www.npmjs.com .
  10. ^ "sass-incrustado". www.npmjs.com .
  11. ^ Weizenbaum, Natalie. «Ruby Sass ha llegado al final de su vida: « Sass Blog ». sass.logdown.com . Consultado el 21 de abril de 2019 .
  12. ^ "Sass: Ruby Sass". sass-lang.com . Consultado el 21 de abril de 2019 .
  13. ^ "LibSass está obsoleto". sass-lang.com . 26 de octubre de 2020.
  14. ^ "nodo-sass". www.npmjs.com .
  15. ^ "jsass - Una implementación Java del compilador Sass (y otras ventajas). - Google Project Hosting" . Consultado el 23 de febrero de 2014 .
  16. ^ "Documentación de JSass". jsass.readthedocs.io .
  17. ^ "SassCompiler (Vaadin 7.0.7 API)". Vaadin.com. 2013-06-06. Archivado desde el original el 2014-04-21 . Consultado el 2014-02-23 .
  18. ^ abcde Sass (Hojas de estilo sintácticamente asombrosas) SASS_REFERENCE
  19. ^ Módulo: Sass::Script::Functions Funciones Sass
  20. ^ H. Catlin (15 de octubre de 2012). "Las 6 reglas de Hampton para el diseño móvil". Conferencia de desarrolladores de HTML5. Archivado desde el original el 15 de diciembre de 2021. Consultado el 11 de julio de 2013 .
  21. ^ ab M. Catlin (30 de abril de 2012). "libsass". Blog de Moovweb. Archivado desde el original el 8 de mayo de 2013. Consultado el 11 de julio de 2013 .
  22. ^ A. Stacoviak y A. Thorp (26 de junio de 2013). "Sass, libsass, Haml y más con Hampton Catlin". Archivado desde el original el 6 de agosto de 2013. Consultado el 30 de julio de 2013 .
  23. ↑ D. Le Nouaille (7 de junio de 2013). «Sassc y Borbón» . Consultado el 11 de julio de 2013 .
  24. ^ "Compatibilidad con Sass". sass-compatibility.github.io . Consultado el 29 de noviembre de 2019 .

Lectura adicional

Enlaces externos