Por lo que he estado leyendo, Sass es un lenguaje que hace que CSS sea más potente con soporte de variables y matemáticas.
¿Cuál es la diferencia con SCSS? ¿Se supone que es el mismo lenguaje? ¿Similar? ¿Diferente?
Sass es un preprocesador de CSS con avances en la sintaxis. Las hojas de estilo en la sintaxis avanzada son procesadas por el programa, y convertidas en hojas de estilo CSS regulares. Sin embargo, no **amplían el estándar CSS en sí.
Las variables CSS son soportadas y pueden ser utilizadas, pero no tan bien como las variables del preprocesador.
La diferencia entre SCSS y Sass, este texto en la página de documentación de Sass debería responder a la pregunta:
Hay dos sintaxis disponibles para Sass. La primera, conocida como SCSS (Sassy CSS) y utilizada a lo largo de esta referencia, es una extensión de la sintaxis de CSS. Esto significa que toda hoja de estilo CSS válida es un archivo SCSS válido con el mismo significado. Esta sintaxis está mejorada con las características de Sass que se describen a continuación. Los archivos que utilizan esta sintaxis tienen la extensión .scss.
La segunda y más antigua sintaxis, conocida como la sintaxis indentada (o a veces simplemente "Sass"), proporciona una forma más concisa de escribir CSS. Utiliza sangría en lugar de corchetes para indicar el anidamiento de los selectores, y nuevas líneas en lugar de punto y coma para separar las propiedades. Los archivos que utilizan esta sintaxis tienen la extensión .sass.
Sin embargo, todo esto funciona sólo con el precompilador Sass, que al final crea el CSS. No es una extensión del estándar CSS en sí.
Soy uno de los desarrolladores que ayudó a crear Sass.
La diferencia es la interfaz de usuario. Por debajo del exterior textual son idénticos. Esta es la razón por la que los archivos sass y scss pueden importarse entre sí. En realidad, Sass tiene cuatro analizadores sintácticos: scss, sass, CSS y less. Todos ellos convierten una sintaxis diferente en un Árbol de Sintaxis Abstracto que se procesa posteriormente en una salida CSS o incluso en uno de los otros formatos a través de la herramienta sass-convert.
Utiliza la sintaxis que más te guste, ambas son totalmente compatibles y puedes cambiar entre ellas más adelante si cambias de opinión.
De la página web de la lengua
Sass tiene dos sintaxis. La nueva sintaxis principal sintaxis (a partir de Sass 3) se conoce como "SCSS" (por "Sassy CSS"), y es un sintaxis de CSS3. Esto significa que que toda hoja de estilo CSS3 válida es también válida SCSS también. Los archivos SCSS utilizan la extensión extensión .scss.
La segunda sintaxis, más antigua, se conoce como la sintaxis indentada (o simplemente "Sass"). Inspirada en la sintaxis de Haml, está destinada a personas que prefieren la concisión sobre la similitud con CSS. En lugar de corchetes y punto y coma, utiliza utiliza la sangría de las líneas para especificar los bloques. Aunque ya no es la sintaxis principal, la sintaxis con sangría seguirá siendo soportada. Los archivos en la sintaxis indentada usan la extensión extensión .sass.
SASS es un lenguaje interpretado que escupe CSS. La estructura de Sass se parece a la de CSS (remotamente), pero me parece que la descripción es un poco engañosa; no es *un reemplazo de CSS, ni una extensión. Es un intérprete que escupe CSS al final, así que Sass sigue teniendo las limitaciones del CSS normal, pero las enmascara con un código sencillo.