Compass: Compass es un marco de distribución de hojas de estilo. Está escrito en Ruby y fue desarrollado principalmente para corregir las deficiencias que prevalecen en CSS. Compass viene con un entorno de creación robusto, lo que significa que el código que desarrollamos se monitorea automáticamente y luego se compila para su uso en forma de CSS puro. Compass hace uso de SASS.
Características de la brújula:
- Anidamiento de estilo SASS habilitado por reglas CSS.
- Funciones integradas para el uso de imágenes, colores, fuentes y expresiones.
- Ayuda a crear hermosos ritmos tipográficos.
- Ayuda a descargar y crear extensiones de una manera mucho más sencilla.
Ejemplo:
@import"compass/utilities/color/contrast";
@mixin bordered($color, $width) {
border: $width solid $color;
}
.myBook {
@include bordered(blue, 2px);
}
.myStudy {
@include bordered(red, 3px);
}
Producción:
SASS: SASS significa hojas de estilo sintácticamente asombrosas. Es simplemente una extensión de CSS que nos permite hacer uso de variables, importaciones en línea, bucles anidados y mucho más. SASS generalmente se interpreta en hojas de estilo en cascada. SASS utiliza dos sintaxis:
- La sintaxis prevista
- CSS descarado
Características de SASS:
- SASS permite definir variables dentro.
- SASS admite la interpolación, es decir, puede definir un elemento en una variable y luego interpolarlo en el código SASS.
- SASS tiene varias funciones incorporadas. Las funciones presentes están relacionadas con los colores, fuentes y expresiones.
- SASS es compatible con todas las versiones de CSS.
Ejemplo:
$bgcolor: blue;
$primary-color: #212;
body {
background-color: $bgcolor
color: $primary-color;
}
Producción:
Aunque tanto Compass como SASS suenan similares. Hay una diferencia significativa entre ambos. Estos son:
| S.No | Brújula | HABLAR CON DESCARO A |
|---|---|---|
| Definición | Compass es una biblioteca SASS que contiene el código sin procesar con funciones incorporadas adicionales. | SASS es simplemente una extensión de CSS3 que incluye variables, bucles, herencia de selector y muchos más. |
| Necesitar | Sin prefijo de proveedor en CSS. | La presencia de variables se establece como el factor clave. |
| Sencillez | La mezcla de brújula hace que CSS3 sea bastante fácil sin mucha complejidad. | SASS proporciona un CSS bien formateado. Esto hace que sea más fácil de organizar y mantener. |
| Aprobación | Compass tiene comparativamente menos aprobación en las empresas que SASS. | SASS tiene más aprobaciones con aproximadamente 2098 pilas de empresas. |
| Uso | Empresas como Weebly y Movielala utilizan Compass. | Pandora , Square y Airbnb usan SASS. |