scss sass compass-sass

scss - ¿Diferencia entre compás y sass?



sass scss (4)

Sé que esta es una pregunta estúpida, pero he estado buscando en Google y no puedo encontrar ninguna respuesta: ¿Cuál es la diferencia entre SASS y Compass, SASS y SCSS? Estoy realmente confundido por esto.

Gracias por cualquier información :)


A riesgo de simplificar en exceso, Compass es un marco, mientras que Sass es una abstracción del lenguaje. Usted escribe el código Sass (y lo compila en CSS estándar) dentro del contexto de Compass. SCSS es simplemente la sintaxis más reciente del lenguaje Sass. Fue creado con el único propósito de ser más parecido a CSS en su sintaxis, por lo que puedo decir. Todo el azúcar sintáctico de Sass, pero más familiar para los desarrolladores front-end que se sienten cómodos con CSS.


Compass es un framework construido con Sass. Otros marcos populares de Sass son Bourbon y Susy . Eso significa que, todos estos marcos están escritos en Sass. Solo tienen funciones y combinaciones predefinidas que puede utilizar para acelerar su flujo de trabajo.

SCSS (Sassy Sass) es solo la sintaxis más nueva de Sass. Utiliza sintaxis CSS. Por ejemplo:

h2 { color: red; }

Por otro lado, Sass usa una sintaxis menos "estricta":

h2 color: red

Tenga en cuenta que no se utilizan llaves ni punto y coma. Además, tienes que usar sangría.

En resumen, qué marco o qué sintaxis de Sass usarás, ¡es tu elección!


En general, "Sass" es el nombre de un preprocesador css. Significa: una herramienta útil para que los desarrolladores escriban formas cortas de marcadores de posición que se compilan automáticamente en el código css normal. Sass tiene dos formas diferentes de escribir código de formato corto: SCSS y SASS. La diferencia entre SCSS y SASS es muy simple: SCSS es un CSS normal con funciones adicionales. Cada archivo CSS puede ser renombrado como .scss y se validará. SASS usa una forma más corta de escritura saltándose todos los corchetes. Para convertir un archivo .css en un archivo .sass válido, debe cambiar el código CSS.

Compass es un denominado css framework que se controla mediante herramientas de línea de comandos. Compass es compatible con el desarrollo al proporcionar funciones predefinidas, mezclas, etc. para acelerar la codificación y evitar errores de escritura. por ejemplo, la brújula le permite llamar a un cuadro de sombra con todos los rellenos automáticos simplemente escribiendo "@include cuadro de sombra ();". todo el código css se agrega con la brújula cuando compila el archivo mediante el uso de "compilación de brújula". Compass es una de las herramientas más utilizadas para trabajar en proyectos de desarrollo frontend más grandes.


He proporcionado una respuesta TLDR:

Compass es esencialmente una biblioteca SASS. Utiliza el lenguaje en bruto de sass y crea funciones reutilizables comunes.

Desde el website :

La brújula usa Sass.

Sass es una extensión de CSS3 que agrega reglas anidadas, variables, mixins, herencia de selector y más. Sass genera CSS bien formateado y hace que sus hojas de estilo sean más fáciles de organizar y mantener.