¿Cuál es la diferencia entre SCSS y SASS?

SASS (hojas de estilo sintácticamente asombrosas) es un lenguaje de secuencias de comandos de preprocesador que se compilará o interpretará en CSS. SassScript es en sí mismo un lenguaje de secuencias de comandos, mientras que SCSS es la sintaxis principal para SASS que se basa en la sintaxis CSS existente. Hace uso de punto y coma y corchetes como CSS (hojas de estilo en cascada).
SASS y SCSS pueden importarse entre sí. Sass en realidad hace que CSS sea más poderoso con soporte matemático y variable. 
Enumeremos la principal diferencia entre SASS y SCSS. 
 

  • SASS se usa cuando necesitamos una sintaxis original, la sintaxis del código no es necesaria para SCSS.
  • SASS sigue una sangría estricta, SCSS no tiene una sangría estricta.
  • SASS tiene una sintaxis suelta con espacios en blanco y sin punto y coma, SCSS se parece más al estilo CSS y el uso de punto y coma y llaves es obligatorio.
  • La extensión del archivo SASS es .sass y la extensión del archivo SCSS es .scss.
  • SASS tiene más comunidad de desarrolladores y soporte que SCSS.
  • SASS admite SassDoc para agregar documentación, mientras que SCSS permite la documentación en línea.
  • SASS no se puede usar como CSS y viceversa, mientras que un código CSS válido también es un código SCSS válido.
  • SASS es difícil de agregar a proyectos CSS existentes, mientras que SCSS se puede agregar fácilmente a un proyecto CSS existente simplemente agregando código nuevo.

Ejemplo de SCSS: 
 

SCSS

/* .scss file */
$bgcolor: blue;
$textcolor: red;
$fontsize: 25px;
 
/* Use the variables */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}

CSS de salida: 
 

body {
  background-color: blue;
  color: red;
  font-size: 25px;
}
/* now this can apply resulting html file */

Ejemplo de SASS: 

SASS

/* SASS */
 
$primary-color: green
$primary-bg: red
 
body
  color: $primary-color
  background: $primary-bg

CSS de salida:

/* CSS */
body {
  color: green;
  background: red;
}

CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .

Publicación traducida automáticamente

Artículo escrito por KV30 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *