Sass (abreviatura de hojas de estilo sintácticamente impresionantes ) es un lenguaje de secuencias de comandos de preprocesador que se interpreta o compila en hojas de estilo en cascada (CSS). SassScript es el lenguaje de programación en sí.
Diseñada por | Hampton Catlin |
---|---|
Desarrollador | Natalie Weizenbaum y Chris Eppstein |
Apareció por primera vez | 28 de noviembre de 2006 |
Lanzamiento estable | 3.5.6 / 23 de marzo de 2018 [1] |
Disciplina de mecanografía | Dinámica |
SO | Multiplataforma |
Licencia | Licencia MIT |
Extensiones de nombre de archivo | .sass, .scss |
Sitio web | sass-lang |
Implementaciones importantes | |
Dardo , Rubí | |
Influenciado por | |
CSS (tanto "con sangría" como SCSS) Menos (SCSS) | |
Influenciado | |
Menos , lápiz óptico , tritio , Bootstrap (v4 +) |
Sass consta de dos sintaxis . La sintaxis original, llamada "sintaxis con sangría", usa una sintaxis similar a Haml . [2] 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 un 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 con sangría y los archivos SCSS reciben tradicionalmente las extensiones .sass y .scss, respectivamente.
CSS3 consta de una serie de selectores y pseudo-selectores 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. [3]
La sintaxis con sangría es un metalenguaje. SCSS es un metalenguaje anidado , ya que CSS válido es SCSS válido con la misma semántica .
SassScript proporciona los siguientes mecanismos: variables , anidamiento , mixins y herencia de selectores . [2]
Historia
Sass fue diseñado inicialmente por Hampton Catlin y desarrollado por Natalie Weizenbaum. [4] [5] Después de sus versiones iniciales, Weizenbaum y Chris Eppstein han continuado ampliando Sass con SassScript, un lenguaje de programación utilizado en archivos Sass.
Implementaciones importantes
SassScript se implementó en múltiples lenguajes, las implementaciones más destacadas son:
- La implementación de Ruby de código abierto original creada en 2006, [6] desde que se desaprobó debido a la falta de mantenedores y llegó al final de su vida útil en marzo de 2019. [7] [8]
- La implementación oficial de Dart de código abierto. [6]
- libSass, la implementación oficial de C ++ de código abierto.
- la implementación oficial de JavaScript, publicada como módulo "sass" en npm .
- JSass, una implementación de Java no oficial . [9]
- phamlp, una implementación no oficial de SASS / SCSS en PHP . [6]
- Vaadin tiene una implementación Java de Sass. [10]
- Firebug , un Firefox XUL ( "legado") de extensión para el desarrollo web. [11] Desde entonces ha quedado obsoleto en favor de las herramientas de desarrollo integradas en el propio Firefox. Dejó de funcionar desde que Firefox 57 dejó de ser compatible con las extensiones XUL.
Características
Variables
Sass permite definir variables. Las variables comienzan con un signo de dólar ( $ ). Variable asignación se realiza con una de colon ( : ). [11]
SassScript admite cuatro tipos de datos: [11]
- Números (incluidas las unidades)
- Cadenas (con comillas o sin ellas)
- Colores (nombre o nombres)
- Booleanos
Las variables pueden ser argumentos o resultados de una de varias funciones disponibles . [12] Durante la traducción, los valores de las variables se insertan en el documento CSS de salida. [2]
SCSS | Hablar con descaro a | CSS compilado |
---|---|---|
$ color-primario : # 3bbfce ; $ margen : 16 px ;.content-navigation { border-color : $ color-primario ; color : oscurecer ( $ color primario , 10 % ); }.border { relleno : $ margin / 2 ; margen : $ margen / 2 ; color del borde : $ color-primario ; } | $ color primario : # 3bbfce $ margen : 16 px.content-navigation border-color : $ color primario color : oscurecer ( $ color primario , 10 % ).borde padding : $ margin / 2 margin : $ margin / 2 border-color : $ primary-color | . navegación de contenido { color de borde : # 3bbfce ; color : # 2b9eab ; }. borde { relleno : 8 px ; margen : 8 px ; color del borde : # 3bbfce ; } |
Anidamiento
CSS admite el anidamiento lógico, pero los bloques de código en sí mismos no están anidados. Sass permite que el código anidado se inserte entre sí. [2]
SCSS | Hablar con descaro a | CSS compilado |
---|---|---|
tabla .hl { margen : 2em 0 ; td .ln { alineación de texto : derecha ; } }li { fuente : { familia : serif ; peso : negrita ; tamaño : 1 .3em ; } } | tabla .hl margen : 2 em 0 td .ln alineación de texto : derecha li fuente : familia : serif peso : negrita tamaño : 1 .3 em | mesa . hl { margen : 2 em 0 ; } tabla . hl td . ln { alineación de texto : derecha ; }li { familia de fuentes : serif ; font-weight : negrita ; tamaño de fuente : 1.3 em ; } |
Los tipos de anidamiento más complicados, incluido el anidamiento de espacios de nombres y las referencias a los padres, se tratan en la documentación de Sass. [11]
SCSS | Hablar con descaro a | CSS compilado |
---|---|---|
@mixin table-base { th { alineación de texto : centro ; font-weight : negrita ; } td , th { relleno : 2px ; } }#data { @include table-base ; } | = tabla-base th text-align : center font-weight : negrita td , th padding : 2 px#data + table-base | # data th { alineación de texto : centro ; font-weight : negrita ; } # data td , # data th { relleno : 2 px ; } |
Bucles
Sass permite iterar sobre variables usando @for
, @each
y @while
, que se puede usar para aplicar diferentes estilos a elementos con clases o identificadores similares.
Hablar con descaro a | CSS compilado |
---|---|
$ squareCount : 4 @for $ i desde 1 hasta $ squareCount # square- # { $ i } color de fondo : rojo ancho : 50 px * $ i altura : 120 px / $ i | # cuadrado-1 { color de fondo : rojo ; ancho : 50 px ; altura : 120 px ; }# cuadrado-2 { color de fondo : rojo ; ancho : 100 px ; altura : 60 px ; }# cuadrado-3 { color de fondo : rojo ; ancho : 150 px ; altura : 40 px ; } |
Argumentos
Los mixins también apoyan los argumentos. [2]
Hablar con descaro a | CSS compilado |
---|---|
= left ( $ dist ) float : left margin-left : $ dist#data + izquierda ( 10 px ) | # datos { float : left ; margen izquierdo : 10 px ; } |
En combinación
Hablar con descaro a | CSS compilado |
---|---|
= tabla-base th text-align : center font-weight : negrita td , th padding : 2 px= left ( $ dist ) float : left margin-left : $ dist#data + left ( 10 px ) + table-base | # datos { float : left ; margen izquierdo : 10 px ; } # data th { alineación de texto : centro ; font-weight : negrita ; } # data td , # data th { relleno : 2 px ; } |
Herencia del selector
Aunque CSS3 admite la jerarquía del Modelo de objetos de documento (DOM), no permite la herencia del selector. En Sass, la herencia se logra insertando una línea dentro de un bloque de código que usa la palabra clave @extend y hace referencia a otro selector. Los atributos del selector extendido se aplican al selector de llamada. [2]
Hablar con descaro a | CSS compilado |
---|---|
.error border : 1 px # f00 fondo : #fdd.error.intrusion tamaño de fuente : 1 .3 em peso de fuente : negrita.badError @extend .Error border-width : 3 px | . error , . badError { borde : 1 px # f00 ; fondo : #fdd ; }. error . intrusión , . badError . intrusión { tamaño de fuente : 1.3 em ; font-weight : negrita ; }. badError { border-width : 3 px ; } |
Sass admite herencia múltiple . [11]
libSass
En la Conferencia de desarrolladores de HTML5 de 2012, Hampton Catlin, el creador de Sass, anunció la versión 1.0 de libSass, una implementación de código abierto C ++ de Sass desarrollada por Catlin, Aaron Leung y el equipo de ingeniería de Moovweb . [13] [14] El actual mantenedor de Sass, Chris Eppstein, también ha expresado su intención de contribuir. [15]
Según Catlin, libSass se puede "soltar [ped] en cualquier cosa y tendrá Sass en él ... Podrías colocarlo directamente en Firefox hoy y compilar Firefox y se compilará allí. Escribimos nuestro propio analizador desde cero para asegúrese de que sea posible ". [dieciséis]
Los objetivos de diseño de libSass son:
- Rendimiento: los desarrolladores han informado aumentos de velocidad 10 veces mayores que la implementación de Ruby de Sass. [17]
- Integración más sencilla: libSass facilita la integración de Sass en más software. Antes de libSass, la estrecha integración de Sass en un lenguaje o producto de software requería incluir todo el intérprete de Ruby. Por el contrario, libSass es una biblioteca enlazable estáticamente con cero dependencias externas y una interfaz similar a C, lo que facilita la integración de Sass directamente en otros lenguajes y herramientas de programación. Por ejemplo, ahora existen enlaces libSass de código abierto para Node , Go y Ruby . [14]
- Compatibilidad: el objetivo de libSass es la compatibilidad total con la implementación oficial de Ruby de Sass. Este objetivo se ha logrado en libsass 3.3. [18]
Integración IDE
IDE | Software | Sitio web |
---|---|---|
Adobe Dreamweaver CC 2017 | https://blogs.adobe.com/creativecloud/getting-started-with-css-preprocessors-less-and-sass/ | |
Eclipse | https://www.eclipse.org/ | |
Emacs | Modo SCSS | https://github.com/antonj/scss-mode/ |
JetBrains IntelliJ IDEA (Edición definitiva) | https://www.jetbrains.com/idea/ | |
JetBrains PhpStorm | http://www.jetbrains.com/phpstorm/ | |
JetBrains RubyMine | http://www.jetbrains.com/ruby/ | |
JetBrains WebStorm | http://www.jetbrains.com/webstorm/ | |
Microsoft Visual Studio | Mindscape | http://www.mindscapehq.com/products/web-workbench |
Microsoft Visual Studio | SassyStudio | http://visualstudiogallery.msdn.microsoft.com/85fa99a6-e4c6-4a1c-9f00-e6a8129b6f4d |
Microsoft WebMatrix | http://www.microsoft.com/web/ | |
NetBeans | http://plugins.netbeans.org/plugin/34929/scss-support | |
Empuje | haml.zip | http://www.vim.org/scripts/script.php?script_id=1433 |
Átomo | https://github.com/atom/language-sass | |
Código de Visual Studio | https://code.visualstudio.com/Docs/languages/css | |
Sublime | https://github.com/P233/Syntax-highlighting-for-Sass | |
Editar + | https://www.editplus.com/others.html |
Ver también
- Less (idioma de la hoja de estilo)
- Stylus (idioma de la hoja de estilo)
Referencias
- ^ "Lanzamientos · sass / sass" . GitHub . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ a b c d e f Marca de medios (3.2.12). "Sass - Hojas de estilo sintácticamente impresionantes" . Sass-lang.com . Consultado el 23 de febrero de 2014 .
- ^ Sass - Tutorial de hojas de estilo sintácticamente impresionantes
- ^ "Sass: hojas de estilo sintácticamente impresionantes" . sass-lang.com . Archivado desde el original el 1 de septiembre de 2013.
- ^ "Blog de Natalie Weizenbaum" . Archivado desde el original el 11 de octubre de 2007.
- ^ a b c "Sass / Scss" . Drupal.org. 2009-10-21 . Consultado el 23 de febrero de 2014 .
- ^ Weizenbaum, Natalie. "Ruby Sass ha llegado al final de su vida« Blog de Sass " . sass.logdown.com . Consultado el 21 de abril de 2019 .
- ^ "Sass: Ruby Sass" . sass-lang.com . Consultado el 21 de abril de 2019 .
- ^ "jsass - Una implementación Java del compilador Sass (y algunas otras ventajas). - Alojamiento de proyectos de Google" . Consultado el 23 de febrero de 2014 .
- ^ "SassCompiler (Vaadin 7.0.7 API)" . Vaadin.com. 2013-06-06 . Consultado el 23 de febrero de 2014 .
- ^ a b c d e Sass ( Hojas de estilo sintácticamente impresionantes) SASS_REFERENCE
- ^ Módulo: Sass :: Script :: Funciones Funciones Sass
- ^ H. Catlin (15 de octubre de 2012). "6 reglas de diseño móvil de Hampton" . Conferencia de desarrolladores de HTML5 . Consultado el 11 de julio de 2013 .
- ^ a b 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 .
- ^ C. Eppstein [@chriseppstein] (15 de abril de 2013). "¿Buenos recursos sobre producción de escritura, plataforma x C ++? No he codificado ninguno desde la universidad, pero quiero hackear libsass / cc @hcatlin @akhleung" (Tweet) . Consultado el 19 de marzo de 2021 , a través de Twitter .
- ^ A. Stacoviak y A. Thorp (26 de junio de 2013). "Sass, libsass, Haml y más con Hampton Catlin" . Consultado el 30 de julio de 2013 .
- ^ D. Le Nouaille (7 de junio de 2013). "Sassc y Bourbon" . Consultado el 11 de julio de 2013 .
- ^ "Compatibilidad Sass" . sass-compatibility.github.io . Consultado el 29 de noviembre de 2019 .
enlaces externos
- Página web oficial
- pyScss, una biblioteca y cliente de Python Scss
- Compilador SASS, un campo de juegos SASS en línea